モジュール

モジュールの互換性

Nuxt 3 には、@nuxt/kit の自動ラッパーを使用して Nuxt 2 モジュールに対する基本的な下位互換性レイヤーがあります。しかし、モジュールを Nuxt 3 と互換性を持たせるためには、通常、いくつかの手順を踏む必要があり、場合によってはクロスバージョン互換性のために Nuxt Bridge の使用が求められます。

@nuxt/kit を使用して Nuxt 3 対応モジュールを開発するための専用ガイドを用意しています。現在、最適な移行パスは、それに従ってモジュールを書き換えることです。このガイドの残りの部分では、完全な書き換えを避けつつモジュールを Nuxt 3 と互換性を持たせるための準備手順を説明します。

プラグインの互換性

Nuxt 3 プラグインは Nuxt 2 と完全に下位互換性がありません。

Vue の互換性

Composition API を使用するプラグインまたはコンポーネントは、Vue 2 または Vue 3 のどちらかに排他的に対応する必要があります。

を使用することでvue-demiNuxt 2 と 3 の両方と互換性があるはずです。

モジュールの移行

Nuxt 3 ユーザーがモジュールを追加しても、モジュールコンテナ（this.*）にアクセスできないため、コンテナ機能にアクセスするには @nuxt/kit からのユーティリティを使用する必要があります。

@nuxt/bridge でテスト

@nuxt/bridge への移行は、Nuxt 3 をサポートするための最初で最も重要なステップです。

モジュールにフィクスチャまたはサンプルがある場合は、設定に @nuxt/bridge パッケージを追加します（例を参照）。

CommonJS から ESM への移行

Nuxt 3 は TypeScript と ECMAScript Modules をネイティブでサポートしています。詳細とアップグレードについては、ネイティブ ES モジュールを確認してください。

プラグインのデフォルトエクスポートの確認

export default がない Nuxt プラグイン（グローバル Vue プラグインなど）をインジェクトする場合は、最後に export default () => { } を追加してください。

// ~/plugins/vuelidate.js
import Vue from 'vue'
import Vuelidate from 'vuelidate'

Vue.use(Vuelidate)

// ~/plugins/vuelidate.js
import Vue from 'vue'
import Vuelidate from 'vuelidate'

Vue.use(Vuelidate)

export default () => { }

ランタイムモジュールの回避

Nuxt 3 では、Nuxt はビルド時のみの依存関係となり、モジュールが Nuxt ランタイムにフックしようとすべきではありません。

モジュールは、modules ではなく）buildModules に追加するだけで機能するはずです。例：

• Nuxt モジュール内で process.env を更新し、Nuxt プラグインで読み込むことは避けてください。代わりに runtimeConfig を使用してください。
• (*) 本番環境では vue-renderer:* のようなランタイムフックへの依存を避けてください。
• (*) モジュール内でインポートして serverMiddleware を追加することは避けてください。代わりに、ファイルパスを参照して追加することで、モジュールのコンテキストから独立させることができます。

(*) nuxt dev の目的のみで、if (nuxt.options.dev) { } で保護されている場合を除きます。

TypeScript の使用 (任意)

必須ではありませんが、Nuxt エコシステムのほとんどが TypeScript の使用に移行しているため、移行を検討することを強くお勧めします。