ビュー

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

app.vue

デフォルトでは、Nuxt はこのファイルをエントリポイントとして扱い、アプリケーションのすべてのルートに対してそのコンテンツをレンダリングします。

app/app.vue
<template>
  <div>
    <h1>Welcome to the homepage</h1>
  </div>
</template>
Vue に慣れている方は、main.js (通常 Vue アプリを作成するファイル) がどこにあるのか疑問に思うかもしれません。Nuxt はこれを舞台裏で行っています。

コンポーネント

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

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

ページ

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

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

<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert>
      This is an auto-imported component
    </AppAlert>
  </div>
</template>
ルーティングセクションで詳細をお読みください。

レイアウト

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

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

さらにレイアウトを作成し、ページでそれらを使用する方法を学びたい場合は、レイアウトセクションで詳細情報を参照してください。

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

<head> のみを変更する必要がある場合は、SEO とメタセクションを参照してください。

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

server/plugins/extend-html.ts
export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (html, { event }) => {
    // This will be an object representation of the html template.
    console.log(html)
    html.head.push(`<meta name="description" content="My custom description" />`)
  })
  // You can also intercept the response here.
  nitroApp.hooks.hook('render:response', (response, { event }) => { console.log(response) })
})
ドキュメント > 4 X > ガイド > さらに詳しく > フックで詳細をお読みください。