ページとレイアウト

app.vue

Nuxt 3では、~/app.vueを通じてアプリへの中心的なエントリーポイントが提供されます。

このファイルは、アプリの起動時に一度だけ実行する必要があるカスタムコードや、アプリのすべてのページに存在するコンポーネントを配置するのに最適な場所です。たとえば、レイアウトが1つしかない場合は、これをapp.vueに移動できます。

移行

app.vueファイルを作成し、アプリのトップレベルで一度だけ実行する必要があるロジックを含めることを検討してください。こちらの例をご覧ください。

レイアウト

複数のページでアプリ内でレイアウトを使用している場合は、わずかな変更のみが必要です。

Nuxt 2では、<Nuxt>コンポーネントがレイアウト内で使用され、現在のページをレンダリングしていました。Nuxt 3では、レイアウトの代わりにスロットを使用するため、そのコンポーネントを<slot />に置き換える必要があります。これにより、名前付きスロットやスコープ付きスロットを使用した高度なユースケースも可能になります。レイアウトの詳細はこちらをご覧ください。

また、definePageMetaコンパイラマクロを使用して、ページで使用されるレイアウトを定義する方法を変更する必要があります。レイアウトはケバブケースになります。したがって、layouts/customLayout.vueは、ページで参照されるとcustom-layoutになります。

移行

1. <Nuxt />を<slot />に置き換えます。
   layouts/custom.vue

     <template>
       <div id="app-layout">
         <main>
   -       <Nuxt />
   +       <slot />
         </main>
       </div>
     </template>
   

2. ページで使用されるレイアウトを選択するには、definePageMetaを使用します。
   pages/index.vue

     <script>
   + definePageMeta({
   +   layout: 'custom'
   + })
   - export default {
   -   layout: 'custom'
   - }
     </script>
   

3. ~/layouts/_error.vueを~/error.vueに移動します。エラー処理ドキュメントを参照してください。このページがレイアウトを使用するようにする場合は、error.vue内で直接<NuxtLayout>を使用できます。
   error.vue

   <template>
     <div>
       <NuxtLayout name="default">
         <!-- -->
       </NuxtLayout>
     </div>
   </template>
   

ページ

Nuxt 3には、ソースディレクトリにpages/ディレクトリが存在することによってトリガーされる、オプションのvue-router統合が付属しています。ページが1つしかない場合は、代わりにapp.vueに移動して軽量なビルドを検討してください。

動的ルート

Nuxt 3で動的ルートを定義するための形式はNuxt 2とはわずかに異なるため、pages/内のファイルの名前を変更する必要がある場合があります。

1. 以前は_idを使用して動的ルートパラメーターを定義していましたが、現在は[id]を使用します。
2. 以前は_.vueを使用してキャッチオールルートを定義していましたが、現在は[...slug].vueを使用します。

ネストされたルート

Nuxt 2では、<Nuxt>と<NuxtChild>を使用して、ネストされたルート（親コンポーネントと子コンポーネントを含む）を定義していたでしょう。Nuxt 3では、これらは単一の<NuxtPage>コンポーネントに置き換えられました。

ページキーとキープアライブプロパティ

カスタムページキーまたはキープアライブプロパティを<Nuxt>に渡していた場合は、definePageMetaを使用してこれらのオプションを設定するようになりました。

ページとレイアウトのトランジション

コンポーネントオプションでページまたはレイアウトのトランジションを直接定義していた場合は、definePageMetaを使用してトランジションを設定する必要があります。Vue 3以降、-enterと-leave CSSクラスの名前が変更されました。<Nuxt>のstyleプロパティは、<slot>で使用するとトランジションに適用されなくなったため、スタイルを-activeクラスに移動します。

移行

1. 動的パラメーターを持つページの名前を新しい形式に一致するように変更します。
2. <Nuxt>と<NuxtChild>を<NuxtPage>に更新します。
3. Composition APIを使用している場合は、this.$routeとthis.$routerをuseRouteとuseRouterコンポーザブルを使用するように移行することもできます。

例：動的ルート

- URL: /users
- Page: /pages/users/index.vue

- URL: /users/some-user-name
- Page: /pages/users/_user.vue
- Usage: params.user

- URL: /users/some-user-name/edit
- Page: /pages/users/_user/edit.vue
- Usage: params.user

- URL: /users/anything-else
- Page: /pages/users/_.vue
- Usage: params.pathMatch

例：ネストされたルートとdefinePageMeta

<template>
  <div>
    <NuxtChild keep-alive :keep-alive-props="{ exclude: ['modal'] }" :nuxt-child-key="$route.slug" />
  </div>
</template>

<script>
export default {
  transition: 'page' // or { name: 'page' }
}
</script>

<NuxtLink>コンポーネント

グローバルなNuxtLinkコンポーネントの構文と機能のほとんどは同じです。ショートカットの<NLink>形式を使用していた場合は、これを<NuxtLink>を使用するように更新する必要があります。

<NuxtLink>は、すべてのリンク（外部リンクを含む）のドロップイン代替になりました。詳細と、独自のリンクコンポーネントを提供するために拡張する方法については、こちらをご覧ください。

プログラムによるナビゲーション

Nuxt 2からNuxt 3に移行する場合、ユーザーをプログラムでナビゲートする方法を更新する必要があります。Nuxt 2では、this.$routerを使用して基になるVue Routerにアクセスできました。Nuxt 3では、Vue Routerにルートとパラメーターを渡すことができるnavigateTo()ユーティリティメソッドを使用できます。

<script>
export default {
  methods: {
    navigate(){
      this.$router.push({
        path: '/search',
        query: {
          name: 'first name',
          type: '1'
        }
      })
    }
  }
}
</script>