📘

[和訳] Nuxt3 公式サイト~App file

2023/02/26に公開

この記事について

この記事はNuxt3 公式サイト App file を和訳したものになります(日本語が不自然になってしまっている箇所があるのはごめんなさい)。
https://nuxt.com/docs/guide/directory-structure/app

App file

app.vue ファイルは Nuxt3 アプリケーションのメインコンポーネントです。

Minimal usage

Nuxt3 では、pages/ ディレクトリはオプションです。存在しない場合、Nuxt は vue-router の依存結果を含めません。ランディングページやルーティングを必要としないアプリケーションで作業するときに便利です。

app.vue
<template>
  <h1>Hello world!</h1>
</template>

Usage With Pages

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

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

もし、ページ間のページ周りの構造をカスタマイズする可能性があるのなら、layouts/ ディレクトリをチェックしてみてください。
https://nuxt.com/docs/guide/directory-structure/layouts

GitHubで編集を提案

Discussion