設定

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 の読み込み動作をより予測可能にするため、非同期設定構文は非推奨となりました。非同期操作には 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 を作成します。

   {
     "files": [],
     "references": [
       {
         "path": "./.nuxt/tsconfig.app.json"
       },
       {
         "path": "./.nuxt/tsconfig.server.json"
       },
       {
         "path": "./.nuxt/tsconfig.shared.json"
       },
       {
         "path": "./.nuxt/tsconfig.node.json"
       }
     ]
   }
   

2. npx nuxt prepare を実行して tsconfig ファイルを生成します。
3. ドキュメントの指示に従って Volar をインストールします。

Vue の変更点

推奨される Vue のベストプラクティスには多くの変更があり、Vue 2 と 3 の間にはいくつかの破壊的変更があります。

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

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

Vuex

Nuxt は Vuex の統合を提供しなくなりました。代わりに、Vue の公式な推奨は pinia を使用することです。これは、Nuxt モジュール. を介して組み込みの Nuxt サポートを備えています。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を使用すると、すぐに動作するはずです。