Nuxtのアップグレード

最新リリース

Nuxtを最新リリースにアップグレードするには、nuxt upgrade コマンドを使用します。

npx nuxt upgrade

ナイトリーリリースチャンネル

リリース前に最新のNuxtビルドを使用し、機能をテストするには、ナイトリーリリースチャンネルガイドを参照してください。

Nuxt 4 のテスト

Nuxt 4 は 2025年第2四半期にリリース予定 です。これには、compatibilityVersion: 4 を通じて現在利用可能な機能がすべて含まれます。

リリースまで、Nuxt バージョン 3.12+ から Nuxt 4 の破壊的変更を多くテストすることが可能です。

Nuxt 4 へのオプトイン

まず、Nuxt を最新のリリースにアップグレードします。

その後、compatibilityVersion を Nuxt 4 の挙動に合わせて設定できます：

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  // Nuxt v3 の挙動を再有効にするには、以下のオプションを設定します:
  // srcDir: '.',
  // dir: {
  //   app: 'app'
  // },
  // experimental: {
  //   scanPageMeta: 'after-resolve',
  //   sharedPrerenderData: false,
  //   compileTemplate: true,
  //   resetAsyncDataToUndefined: true,
  //   templateUtils: true,
  //   relativeWatchPaths: true,
  //   normalizeComponentNames: false,
  //   spaLoadingTemplateLocation: 'within',
  //   parseErrorData: false,
  //   pendingWhenIdle: true,
  //   alwaysRunFetchOnKeyChange: true,
  //   defaults: {
  //     useAsyncData: {
  //       deep: true
  //     }
  //   }
  // },
  // features: {
  //   inlineStyles: true
  // },
  // unhead: {
  //   renderSSRHeadOptions: {
  //     omitLineBreaks: false
  //   }
  // }
})

compatibilityVersion を 4 に設定すると、Nuxt の設定全体のデフォルトが Nuxt v4 の挙動にオプトインされますが、テスト中に Nuxt v3 の挙動を選択的に再有効化することができます。上述のコメントアウトした行に従ってください。そうすると問題が発生した場合に、それらを Nuxt やエコシステムに報告して対処してもらえます。

破壊的または重大な変更は、後方/前方互換性の移行手順とともにここに記載されます。

Codemods を使用した移行

アップグレードプロセスを容易にするために、Codemod チームと協力して、いくつかのオープンソースの codemods で多くの移行手順を自動化しました。

Nuxt 4 の codemods の完全なリスト、各 codemod の詳細情報、そのソース、および実行方法については、Codemod Registryをご覧ください。

このガイドで触れられているすべての codemods を次の codemod レシピを使用して実行できます：

npx codemod@latest nuxt/4/migration-recipe

このコマンドは、すべての codemods を順番に実行します。実行したくないものを選択解除するオプションもあります。各 codemod は以下にリストアップされ、それぞれの変更と共に独立して実行することもできます。

新しいディレクトリ構造

🚦 影響レベル: 重要

Nuxt は新しいディレクトリ構造をデフォルトで採用するようになり、後方互換性も保ちます（たとえば、トップレベルの pages/ ディレクトリを使用している場合、この新しい構造は適用されません）。

👉 完全な RFC を見る

何が変わったか

• 新しい Nuxt デフォルトの srcDir はデフォルトで app/ となり、ほとんどのものはそこから解決されるようになります。
• serverDir はデフォルトで <rootDir>/server になり、<srcDir>/server ではなくなります。
• layers/, modules/, public/ はデフォル