app.vue

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

<template>
  <div>
   <h1>ホームページへようこそ</h1>
  </div>
</template>

コンポーネント

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

<template>
  <div>
    <h1>ホームページへようこそ</h1>
    <AppAlert>
      これは自動インポートされたコンポーネントです。
    </AppAlert>
  </div>
</template>

ページ

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

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

<template>
  <div>
    <h1>ホームページへようこそ</h1>
    <AppAlert>
      これは自動インポートされたコンポーネントです
    </AppAlert>
  </div>
</template>

レイアウト

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

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

より多くのレイアウトを作成し、それらをページで使用する方法を学びたい場合は、レイアウトセクションで詳細を確認してください。

上級: HTMLテンプレートの拡張

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

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) })
})