はじめに

この記事はlayouts、pagesの仕様や使い方について書いています。

大まかに以下の流れで説明していきます。
1.app.vueについて
 2.layoutsについて
 3.pagesについて

説明のために書くコードでは<script setup>構文を使用します。

対象

Nuxt初心者の方、Nuxt2 → 3の変更点を知りたい方を対象にしています。
また、Nuxt3の環境構築は済んでいる前提で進めます。

環境

Nuxt.js：3.0.0
Vue.js：3.2.45

1. app.vueについて

まずはapp.vueについて説明しておきます。
Nuxt3ではプロジェクト立ち上げ時にapp.vueファイルが生成されるのですが、こちらを使用する場合は下記のようにコードを追加しないとlayouts/とpages/のファイルが読み込まれません。

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

app.vueに記述した内容は全てのコンポーネントに適用されますので全ての画面に反映させたい内容がある場合などに使用するといいみたいです。

app.vueを削除すると今まで通りレイアウトファイル、ページファイルを自動的に読み込むようになります。

2. layoutsについて

以下について書きます。

レイアウトファイルでページファイルを読み込む方法
ページファイルでレイアウトを指定する方法

Nuxt3ではlayoutsディレクトリは自動で生成されなくなったのでまずはルートディレクトリにlayoutsディレクトリを作成します。

2.1 レイアウトファイルでページファイルを読み込む方法

下記のように<slot />を使用して`ページファイルを読み込みます。

<template>
  <div>
    <slot /> // pages配下のファイルを表示する
  </div>
</template>

ちなみにnuxt2では<nuxt />で読み込んでいました。

2.2 ページファイルから指定する方法

レイアウトの設定方法ですが、layouts/default.vueであれば設定無しで自動的に読み込まれます。
それ以外のレイアウトを適用する場合はページファイルで下記のように指定します。

<script setup>
definePageMeta({ layout: 'foo' })
</script>

上記の例ではlayouts/fooを指定しています。
また、どのレイアウトも読み込みたくない場合はdefinePageMeta({ layout: false })のようにします。

3. pagesについて

以下について書いていきます。

NuxtPageで子ページを読み込む
metaタグの管理
動的なルート

layoutsと同じくNuxt3ではpagesディレクトリが自動で生成されなくなりましたので、まずはルートディレクトリにpagesを作成してください。

3.1 NuxtPageで子ページを読み込む

Nuxtでは下記のようなディレクトリ構成の場合、parent.vueに<NuxtPage />を記述するとchilde.vueを読み込むことができます。

┣ parent
┃ ┗ childe.vue
┗ parent.vue

parent.vue

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

子ページ全てに反映させたい内容がある場合に使えるかと思います。
ちなみにNuxt2では<Nuxt>、もしくは<NuxtChild>で子ページを読み込んでいました。

3.2 metaタグの管理

metaタグの管理する方法は以下の3つがあります。

nuxt.config.tsで管理
Headタグを使用する
useHeadを使用する

ページファイルに関連する2、3のみ説明していきます。

3.2.1 Headタグを使用する

ページファイルのtemplate内で<Head>を使用します。

<template>
  <div>
    <Head>
      <Title>タイトルです。</Title>
      <Meta name="description" content="説明です"/>
    </Head>
  </div>
</template>

htmlっぽく使えてわかりやすいですね。

3.2.2 useHeadを使用する

ページファイルのscript内で下記のように記述する

<script setup>
useHead({
  title: 'タイトルです。',
  meta: [
    { name: 'description', description: '説明です' }
  ]
})
</script>

nuxt2ではhead()で指定していました。

補足になりますが、「管理画面 - ログイン」のようなタイトルの場合、「管理画面」の部分は固定にして「ログイン」の部分は画面によって動的に切り替わるようにしたいと思います。
そういった場合は下記のように記述します。

pages/admin.vue

<script setup>
useHead({
  titleTemplate: (pageTitle) => {
    return pageTitle ? `管理画面 - ${pageTitle}` : '管理画面';
  }
})
</script>

pageTitleに各ページに設定したタイトルが入ります。

pages/admin/login.vue

<script setup>
useHead({
  title: 'ログイン'
})
</script>

上記のように設定すると「管理画面 - ログイン」のように全体に適用する固定のタイトルと各ページごとに適用する動的なタイトルを設定する事ができます。

3.3 動的なルートについて

動的なルートにする場合、ファイル名のパラメータの部分を[id].vueのように角括弧で囲います。

pages/[id].vue

<script setup>
const route = useRoute()
</script>

<template>
  <div style="margin: 50px">ID： {{ route.params.id }}</div>
</template>

localhost:3333/1のURLにアクセスできるか試してみてください。

最後に

ここまで見ていただきありがとうございました。
この記事では説明していない内容もありますのでもっと詳しく知りたい場合はドキュメントを確認してみてください。

Nuxt3のlayouts、pagesについて