最終更新日: 2023年08月15日

Views

Nuxtは、アプリケーションのユーザーインターフェースを実装するためのいくつかのコンポーネントレイヤーを提供しています。

app.vue

デフォルトでは、Nuxtはこのファイルをエントリポイント(最初に実行される開始ファイル)として扱い、アプリケーションのすべてのルートに対してその内容をレンダリングします。

app.vue
vue

//ページが複数ある場合はpagesディレクトリを利用する。必ずしもapp.vueは必要ない。
//例えば「ランディングページ（ペライチ）」のような場合は、直接app.vueを利用して制作することになる。
<template>
  <div>
    <h1>Welcome to the homepage</h1>
  </div>
</template>

InfoもしVueに慣れているのであれば、通常はVueアプリケーションを作成するファイルであるmain.jsがどこにあるのか疑問に思うかもしれません。しかし、Nuxtはこれをバックグラウンドで行っています。

コンポーネント / Components

コンポーネントは、ボタンやメニューなどの再利用可能なユーザーインターフェースの要素です。 Nuxtでは、これらのコンポーネントをcomponents/ディレクトリに作成することができます。明示的にインポートする必要はなく、これらのコンポーネントは自動的にアプリケーション全体で利用可能になります。

app.vue
vue

<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert> This is an auto-imported component. </AppAlert>
  </div>
</template>

components/GlobalNavi.vue
vue

// componentsディレクトリにvueを作成。ほかのページでも再利用可。
<template>
  <nav>
    <h1>
      <NuxtLink to="/">Nuxt3 Guide JP</NuxtLink>
    </h1>
    <ul>
      <li><NuxtLink to="/">Get Started</NuxtLink></li>
      <li><NuxtLink to="/guide">Guide</NuxtLink></li>
      <li><NuxtLink to="/api">API</NuxtLink></li>
    </ul>
  </nav>
</template>

layouts/default.vue
vue

<template>
  <div class="content_wrap">
    <header>
      // compornentsディレクトリにあるGlobalNavi.vue呼び出し
      <GlobalNavi />
    </header>
    <main>
      <slot />
    </main>
    <footer>
      <TheFooter />
    </footer>
  </div>
</template>

ページ / Pages

ページは、特定のルートのパターンごとに対象のページを表示します。 pages/ディレクトリ内の各ファイルは、異なるルートを表し、そのコンテンツを表示します。

ページを使用するには、pages/index.vueファイルを作成し、app.vueに<NuxtPage/> コンポーネントを追加します（またはデフォルトのエントリを使用する場合はapp.vueを削除します）。これにより、pages/ディレクトリに新しいファイルを追加することで、さらにページとそれに対応するルートを作成することができます。

pages/about.vue
vue

// 「http://localhost:3000/about」で表示されるaboutページ
<template>
  <section>
    <p>This page will be displayed at the /about route.</p>
  </section>
</template>

app.vue
vue

// NuxtPageを記述することで、pagesディレクトリにあるindex.vueを呼び出し。
<template>
  <div>
    <NuxtPage />
  </div>
</template>

pages/index.vue
vue

// 「http://localhost:3000/」で表示されるindexページ
<template>
  <div>
    <h1>Welcome to the homepage</h1>
  </div>
</template>

Info ページについては、ルーティングのセクションでさらに詳しく学ぶことができます。

レイアウト / Layouts

レイアウトは、複数のページで共通のユーザーインターフェース（ヘッダーやフッターなど）を含むページのラッパーです。レイアウトは、ページコンテンツを表示するために<slot />コンポーネントを使用するVueファイルです。デフォルトでは、layouts/default.vueファイルが使用されます。カスタムレイアウトは、ページのメタデータの一部として設定することができます。

もしアプリケーションに単一のレイアウトしかない場合は、<NuxtPage />コンポーネントを使用したapp.vueを使用することをおすすめします。

pages/index.vue
vue

<template>
  <div>
    <h1>Welcome to the homepage</h1>
  </div>
</template>

pages/about.vue
vue

// NuxtPage を NuxtLayout でサンドイッチ
<template>
  <div>
    <NuxtLayout>
      // pages/index.vueの読み込み
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

layouts/default.vue
vue

// すべてのページのレイアウトのベースになる。(ページごとに異なるカスタムデザインも可)
<template>
  <div class="content_wrap">
    <main class="container">
      <slot />
    </main>
  </div>
</template>

もっと多くのレイアウトの方法を学びたい場合は、レイアウトのセクションで詳細情報を見つけることができます。

高度なHTMLテンプレートの拡張

もしhead要素を変更するだけであれば、SEOとメタ情報のセクションを参照してください。

Nitroプラグインを追加して、HTMLテンプレートに完全な制御を持つことができます。Nitroプラグインはフックを登録することができます。 render:htmlフックのコールバック関数を使用すると、HTMLがクライアントに送信される前に変更することができます。

server/plugins/extend-html.ts
ts

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook("render:html", (html, { event }) => {
    // HTMLテンプレートのオブジェクト。
    console.log(html);
    html.head.push(`<meta name="description" content="My custom description" />`);
  });
  // ここではレスポンスをインターセプトすることもできます。
  nitroApp.hooks.hook("render:response", (response, { event }) => {
    console.log(response);
  });
});

Info 詳細については、「ガイド」 > 「さらに進む」 > 「フック」を参照してください。