app.vue

app.vueファイルは、Nuxtアプリケーションのメインコンポーネントです。
app/pages/ディレクトリがある場合、app.vueファイルはオプションです。Nuxtはデフォルトのapp.vueを自動的に含みますが、必要に応じて構造とコンテンツをカスタマイズするために独自のファイルを追加することもできます。

使用方法

最小限の利用方法

Nuxtでは、app/pages/ディレクトリはオプションです。存在しない場合、Nuxtはvue-router依存関係を含みません。これは、ランディングページやルーティングを必要としないアプリケーションを構築する場合に便利です。

app/app.vue
<template>
  <h1>Hello World!</h1>
</template>
Docs > 4 X > Examples > Hello Worldでライブサンプルを読んで編集してください。

ページとの利用方法

app/pages/ディレクトリがある場合、現在のページを表示するために<NuxtPage>コンポーネントを使用する必要があります。

app/app.vue
<template>
  <NuxtPage />
</template>

app.vue内でアプリケーションの共通構造を直接定義することもできます。これは、ヘッダーやフッターなどのグローバル要素を含めたい場合に便利です。

app/app.vue
<template>
  <header>
    Header content
  </header>
  <NuxtPage />
  <footer>
    Footer content
  </footer>
</template>
app.vueはNuxtアプリケーションのメインコンポーネントとして機能することを覚えておいてください。追加されたもの（JSおよびCSS）はすべてグローバルとなり、すべてのページに含まれます。
app/pages/ディレクトリを使用してページを構成する方法について詳しく学ぶ。

レイアウトとの利用方法

アプリケーションが異なるページに異なるレイアウトを必要とする場合、app/layouts/ディレクトリを<NuxtLayout>コンポーネントと組み合わせて使用できます。これにより、複数のレイアウトを定義し、ページごとに適用することができます。

app/app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
app/layouts/ディレクトリを使用してレイアウトを構成する方法について詳しく学ぶ。