ビュー

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 を変更できます。

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