モジュール

モジュールの互換性

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-demiを使用することで、Nuxt 2と3の両方と互換性を持つようになります。

モジュールの移行

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

@nuxt/bridgeでテストする

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

モジュールにfixtureまたはサンプルがある場合は、その設定に@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)

ランタイムモジュールを避ける

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

モジュールは、buildModules（modulesではなく）にのみ追加されていても動作するはずです。例えば

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

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

TypeScriptの使用（オプション）

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