app.vue
app.vue ファイルは Nuxt アプリケーションのメインコンポーネントです。
pages/ ディレクトリがある場合、app.vue ファイルはオプションです。Nuxt はデフォルトの app.vue を自動的に含めますが、必要に応じて構造や内容をカスタマイズするために独自のものを追加することもできます。
使用方法
最小限の使用法
Nuxt では、pages/ ディレクトリはオプションです。存在しない場合、Nuxt は vue-router 依存関係を含めません。これは、ランディングページやルーティングを必要としないアプリケーションを構築する際に便利です。
app.vue
<template>
<h1>Hello World!</h1>
</template>
サンプルコードの編集とプレビューexamples > hello-world
ページを使用する場合
pages/ ディレクトリがある場合、現在のページを表示するために <NuxtPage> コンポーネントを使用する必要があります。
app.vue
<template>
<NuxtPage />
</template>
また、アプリケーションの共通構造を app.vue に直接定義することもできます。これは、ヘッダーやフッターなどのグローバル要素を含めたい場合に便利です。
app.vue
<template>
<header>
Header content
</header>
<NuxtPage />
<footer>
Footer content
</footer>
</template>
app.vue は Nuxt アプリケーションのメインコンポーネントとして機能することを忘れないでください。これに追加するもの（JS や CSS）はすべてグローバルで、すべてのページに含まれます。
レイアウトを使用する場合
アプリケーションが異なるページに異なるレイアウトを必要とする場合、layouts/ ディレクトリと <NuxtLayout> コンポーネントを使用できます。これにより、複数のレイアウトを定義し、ページごとに適用することができます。
app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
※このページは Nuxt.js 公式ドキュメントの翻訳ページ（非公式）です。
公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/3.x/guide/directory-structure/app