app.vue

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

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

コンポーネント

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

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

ページ

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

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

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

レイアウト

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

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

もっと多くのレイアウトを作成し、ページでそれらをどのように使用するかを学びたい場合は、レイアウトセクションで詳細を見つけることができます。

上級者向け：HTMLテンプレートの拡張

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

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