概要
useAsyncDataとuseFetchコンポーザブルは利用できないなど、いくつかの制限があります。詳細は、このページの残りの部分をお読みください。Bridgeは、Nuxtモジュールをインストールして有効にするだけで、多くの新しいNuxt 3機能を体験できる前方互換性レイヤーです。
Nuxt Bridgeを使用すると、プロジェクトが（ほぼ）Nuxt 3の準備ができていることを確認し、Nuxt 3への移行を段階的に進めることができます。
最初のステップ
Nuxt 2のアップグレード
開発サーバー（nuxt dev）が実行されていないことを確認し、パッケージロックファイル（package-lock.jsonとyarn.lock）を削除し、最新のNuxt 2バージョンをインストールします
- "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を使用することも可能で、推奨されます。
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 Modulesをネイティブにサポートしています。詳細とアップグレードについては、ネイティブESモジュールを確認してください。