概要

Nuxt 3 との違いを減らし、Nuxt 3 への移行の負担を軽減します。
新しい Nuxt 3 プロジェクトを開始する場合は、このセクションをスキップして、Nuxt 3 のインストールに進んでください。
Nuxt Bridge は Nuxt 3 と同じ機能を提供しますが (ドキュメント)、いくつかの制限があります。特に useAsyncData および useFetch コンポーザブルは利用できません。詳細については、このページの残りの部分をお読みください。

Bridge は、Nuxt モジュールをインストールして有効にするだけで、Nuxt 3 の新機能の多くを体験できる前方互換レイヤーです。

Nuxt Bridge を使用すると、プロジェクトが Nuxt 3 に (ほぼ) 対応していることを確認でき、Nuxt 3 への移行を段階的に進めることができます。

最初のステップ

Nuxt 2 をアップグレード

開発サーバー (nuxt dev) が実行中でないことを確認し、パッケージロックファイル (package-lock.json および yarn.lock) を削除し、最新の Nuxt 2 バージョンをインストールします。

package.json
- "nuxt": "^2.16.3"
+ "nuxt": "^2.17.3"

次に、依存関係を再インストールします。

npm install
インストールが完了したら、開発ビルドとプロダクションビルドの両方が期待どおりに動作することを確認してから続行してください。

Nuxt Bridge をインストール

@nuxt/bridge と nuxi を開発依存関係としてインストールします。

npm install -D @nuxt/bridge nuxi

nuxt.config を更新

設定ファイルで module.exports、require、require.resolve などの CommonJS 構文を使用しないようにしてください。これらは間もなく非推奨となり、サポートされなくなります。

代わりに、静的な import、動的な import()、および export default を使用できます。ファイル名を nuxt.config.ts に変更して TypeScript を使用することも可能であり、推奨されています。

nuxt.config.ts
import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: false,
})

コマンドを更新

nuxt コマンドは、nuxt2 コマンドに変更する必要があります。

{
  "scripts": {
-   "dev": "nuxt",
+   "dev": "nuxt2",
-   "build": "nuxt build",
+   "build": "nuxt2 build",
-   "start": "nuxt start",
+   "start": "nuxt2 start"
  }
}

ここで一度 nuxt2 を実行してみてください。以前と同様にアプリケーションが動作することを確認できます。

(「bridge」が false に設定されている場合、アプリケーションは以前と同様に変更なしで動作します。)

アップグレード手順

Nuxt Bridge を使用すると、Nuxt 3 への移行を段階的に進めることができます。以下の アップグレード手順 は、一度にすべてを実行する必要はありません。

CommonJS から ESM へ移行

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