設定

nuxt.config

Nuxtアプリの開始点は、nuxt.config ファイルのままです。

移行

1. 新しいdefineNuxtConfig関数に移行する必要があります。これは、型指定された設定スキーマを提供します。
   Nuxt 2Nuxt 3

   export default {
     // ...
   }
   

2. router.extendRoutesを使用して、新しいpages:extendフックに移行できます。
   Nuxt 2Nuxt 3

   export default {
     router: {
       extendRoutes (routes) {
         //
       }
     }
   }
   

3. router.routeNameSplitterを使用している場合は、新しいpages:extendフックでルート名の生成ロジックを更新することで、同じ結果を得ることができます。
   Nuxt 2Nuxt 3

   export default {
     router: {
       routeNameSplitter: '/'
     }
   }
   

ESM構文

Nuxt 3はESMネイティブフレームワークです。unjs/jitiはnuxt.configをロードするときに半分互換性を提供しますが、このファイル内ではrequireとmodule.exportsを使用しないでください。

1. module.exportsをexport defaultに変更します。
2. const lib = require('lib')をimport lib from 'lib'に変更します。

非同期処理の設定

Nuxtのロード動作をより予測できるように、非同期の設定構文は非推奨になりました。非同期処理のヌクストフックの使用を検討してください。

Dotenv

Nuxtは、.envファイルをロードするための組み込みサポートを提供します。これをnuxt.configから直接インポートしないでください。

モジュール

NuxtとNuxtモジュールはビルド時にのみ使用できます。

移行

1. すべてのbuildModulesをmodulesに移行します。
2. モジュールのNuxt 3互換性を確認します。
3. ディレクトリを指すローカルモジュールがある場合は、エントリファイルを指すようにこれを更新する必要があります。

  export default defineNuxtConfig({
    modules: [
-     '~/modules/my-module'
+     '~/modules/my-module/index'
    ]
  })

ディレクトリの変更

（静的アセットを保存するための）static/がpublic/に名前が変更されました。staticディレクトリをpublicに名前変更するか、名前を保持してnuxt.configでdir.publicを設定できます。

TypeScript

NuxtのTypeScript統合を使用すると、アプリケーションを移行するのがはるかに簡単になります。これは、アプリケーションをTypeScriptで記述する必要があるという意味ではなく、Nuxtエディタに自動的に型ヒントを提供するということです。

ドキュメントで、NuxtのTypeScriptサポートについて詳しく読むことができます。

移行

1. tsconfig.json に次のような内容を作成します。

   {
     "extends": "./.nuxt/tsconfig.json"
   }
   

2. npx nuxi prepare を実行して .nuxt/tsconfig.json を生成します。
3. ドキュメントの手順に従って Volar をインストールします。

Vue の変更

Vue 2 と 3 の間には、推奨される Vue のベストプラクティスに多くの変更が加えられ、多くの破壊的変更が含まれます。

Vue 3 移行ガイド、特に 破壊的変更のリスト を読むことをお勧めします。

現在、Nuxt 3 で Vue 3移行ビルド を使用することはできません。

Vuex

Nuxt は Vuex の統合を提供しなくなりました。代わりに、Vue の公式の推奨事項は、Nuxt モジュール を介して組み込みの Nuxt サポートを備えた piniaを使用することです。 pinia の詳細はこちらをご覧ください。

pinia を使用してグローバル状態管理を提供する簡単な方法は次のとおりです。

@pinia/nuxt モジュールをインストールします。

yarn add pinia @pinia/nuxt

Nuxt コンフィギュレーションでモジュールを有効にします。

import { defineNuxtConfig } from 'nuxt/config';

export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

アプリケーションのルートに store フォルダを作成します。

import { defineStore } from 'pinia'

export const useMainStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      // `this` is the store instance
      this.counter++
    },
  },
})

ストアをグローバルにする プラグイン ファイルを作成します。

import { useMainStore } from '~/store'

export default defineNuxtPlugin(({ $pinia }) => {
  return {
    provide: {
      store: useMainStore($pinia)
    }
  }
})

Vuex を引き続き使用したい場合は、次の手順に従って Vuex 4 に手動で移行できます。

完了したら、Nuxt アプリに次のプラグインを追加する必要があります。

import store from '~/store'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(store);
})

大規模アプリの場合、この移行には多くの作業が必要になる可能性があります。Vuex の更新が引き続き障害となる場合は、そのまま動作するはずのコミュニティモジュール nuxt3-vuex-module を使用することを検討できます。