Nuxt 3のサポート期限は2026年7月31日！Nuxt 4へアップグレードがすぐに必要！

Nuxt 3のサポート期限は2026年7月31日

Webサイトのフロントエンドフレームワークとして広く親しまれているNuxt 3ですが、公式サポート期限である2026年7月31日を過ぎています。

「現状問題なく動いている」「アップグレードする時間がない」といった理由でNuxt 3で運用したまま放置していませんか？

サポートが終了したフレームワークを使い続けることには、大きなセキュリティリスクと技術的負債が伴います。

Nuxtは日本企業のWebサイトでも採用されることが多いですが、現在もNuxt 3からアップグレードされていないWebサイトを見かけることがあります。

Nuxtが使用されているWebサイトの例

WebサイトでNuxtが使用されているかどうかは、デベロッパーツールのConsoleで以下のコマンドを実行するとわかります。

JavaScript

if (window.__NUXT__ || document.getElementById('__nuxt')) {
  console.log('✅️ Nuxtが使用されています。');
} else {
  console.log('❌️ Nuxtは使用されていません。');
}

if (window.__NUXT__ || document.getElementById('__nuxt')) {
  console.log('✅️ Nuxtが使用されています。');
} else {
  console.log('❌️ Nuxtは使用されていません。');
}

なぜ「今すぐ」アップグレードが必要なのか？

サポートが終了したバージョンに対しては、新たな脆弱性が発見されても公式からセキュリティ修正パッチが提供されません。

そのため、Webサイトがサイバー攻撃の標的となるリスクが高まります。

また、サポート切れのフレームワークを使用し続けること自体が、企業のセキュリティ監査における指摘事項となる可能性があるため、早急にアップグレード対応が必要です。

Nuxt 3からNuxt 4への移行手順

まず、pnpm nuxi upgradeを使用してNuxt 3をNuxt 4にアップグレードします。

npmを使用している場合はpnpmをnpmに書き換えてください。

※ node_modulesがプロジェクトディレクトリ内になければ先にpnpm installを実行する。

pnpm nuxi upgrade

pnpm nuxi upgrade

pnpm nuxi upgrade実行後に選択肢が表示されたら、dedupe lockfile (recommended) を選択します。

現在のNuxtではnuxt.config.ts内にcompatibilityDateの設定（将来の変更によって挙動が意図せず変わることを防ぐための設定）が必要なので、以下の警告が出たら指定された日付に変更してください。

[10:00:00]  WARN  [NUXT_B5001] No compatibilityDate is set in nuxt.config, so the 2025-07-15 fallback is being used.
├▶ fix: Add compatibilityDate: '2026-08-10' to your nuxt.config.ts.
╰▶ see: https://nuxt.com/docs/4.x/errors/b5001

[10:00:00]  WARN  [NUXT_B5001] No compatibilityDate is set in nuxt.config, so the 2025-07-15 fallback is being used.
├▶ fix: Add compatibilityDate: '2026-08-10' to your nuxt.config.ts.
╰▶ see: https://nuxt.com/docs/4.x/errors/b5001

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  compatibilityDate: "2026-08-10",
});

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  compatibilityDate: "2026-08-10",
});

最後に新しいディレクトリ構造(app/)へファイルを移行します。

app.vue ➡ app/app.vue
error.vue ➡ app/error.vue
components/ ➡ app/components/
composables/ ➡ app/composables/
pages/ ➡ app/pages/
layouts/ ➡ app/layouts/
middleware/ ➡ app/middleware/
plugins/ ➡ app/plugins/
utils/ ➡ app/utils/

手動でやるとファイルの移行漏れが発生する可能性があるので、appディレクトリへの移行作業は以下のcodemodコマンドで実行してください。

pnpmの場合

pnpm dlx codemod@latest nuxt/4/migration-recipe

pnpm dlx codemod@latest nuxt/4/migration-recipe

npmの場合

npx codemod@latest nuxt/4/migration-recipe

npx codemod@latest nuxt/4/migration-recipe

codemodのコマンドを実行後にRunning codemodの選択肢が表示されるので、「nuxt/4/file-structure」を選択してNuxt 4のファイル構造に変更します。

ただし、advertiseなどの独自に命名したvueファイルが入ったディレクトリは自動でappディレクトリに移行しません。

そのようなディレクトリがある場合は、それらは手動でappディレクトリに移行してください。

$ pnpm dlx codemod@latest nuxt/4/migration-recipe

[1/2] 🔍 Resolving package from registry: https://app.codemod.com ...
⚠️ Package nuxt/4/migration-recipe is legacy
[2/2] 🏁 Running codemod: nuxt/4/migration-recipe
✔ Successfully fetched "nuxt/4/migration-recipe" from local cache.
? Press Enter to run the selected codemods in order. You can deselect anything
you don’t want. (Press <space> to select, <a> to toggle all, <i> to invert
selection, and <enter> to proceed)
 ◉ nuxt/4/absolute-watch-path
 ◉ nuxt/4/default-data-error-value
 ◉ nuxt/4/deprecated-dedupe-value
❯◉ nuxt/4/file-structure
 ◉ nuxt/4/shallow-function-reactivity
 ◉ nuxt/4/template-compilation-changes

$ pnpm dlx codemod@latest nuxt/4/migration-recipe

[1/2] 🔍 Resolving package from registry: https://app.codemod.com ...
⚠️ Package nuxt/4/migration-recipe is legacy
[2/2] 🏁 Running codemod: nuxt/4/migration-recipe
✔ Successfully fetched "nuxt/4/migration-recipe" from local cache.
? Press Enter to run the selected codemods in order. You can deselect anything
you don’t want. (Press <space> to select, <a> to toggle all, <i> to invert
selection, and <enter> to proceed)
 ◉ nuxt/4/absolute-watch-path
 ◉ nuxt/4/default-data-error-value
 ◉ nuxt/4/deprecated-dedupe-value
❯◉ nuxt/4/file-structure
 ◉ nuxt/4/shallow-function-reactivity
 ◉ nuxt/4/template-compilation-changes

Gitで未コミットのファイルがあると実行して良いか聞かれますので、問題なければ「y」を選択します。

? Current git state contains uncommitted changes. Proceed anyway? (y/N)

? Current git state contains uncommitted changes. Proceed anyway? (y/N)

以上の作業が完了した状態でpnpm dev (npm run dev)を実行すれば、Nuxt 4で起動できます。

codemodが使えない場合は、以下のコマンドでappディレクトリを作成して移動できます。

macOSの場合

mkdir -p app && for item in app.vue error.vue components composables pages layouts middleware plugins utils; do [ -e "$item" ] && mv "$item" app/; done

mkdir -p app && for item in app.vue error.vue components composables pages layouts middleware plugins utils; do [ -e "$item" ] && mv "$item" app/; done

Windowsの場合

New-Item -ItemType Directory -Force -Path app; 'app.vue','error.vue','components','composables','pages','layouts','middleware','plugins','utils' | ForEach-Object { if (Test-Path $_) { Move-Item -Path $_ -Destination app/ } }

New-Item -ItemType Directory -Force -Path app; 'app.vue','error.vue','components','composables','pages','layouts','middleware','plugins','utils' | ForEach-Object { if (Test-Path $_) { Move-Item -Path $_ -Destination app/ } }

useFetch / useAsyncData の変更点に注意

Nuxt 4ではデータフェッチ周りの安定性とパフォーマンス向上のため、useFetchおよび useAsyncDataに重要な破壊的変更と仕様改善が行われているので注意が必要です。

初期値が null から undefined に変更
返り値の data が shallowRef に変更
pending が非推奨になり status に一元化
値が変更されると自動的にデータを再取得する
同じ key を持つ useFetch は自動的にデータとエラー情報を共有する
アンマウントされるとデータが自動的にクリーンアップされる

Upgrade Guide · Get Started with Nuxt v4

初期値が変わるのは影響範囲が大きいですが、codemodの「nuxt/4/default-data-error-value」を実行すれば初期値をNuxt 3と同じ「null」に引き戻すことができます。

$ pnpm dlx codemod@latest nuxt/4/migration-recipe

[1/2] 🔍 Resolving package from registry: https://app.codemod.com ...
⚠️ Package nuxt/4/migration-recipe is legacy
[2/2] 🏁 Running codemod: nuxt/4/migration-recipe
✔ Successfully fetched "nuxt/4/migration-recipe" from local cache.
? Press Enter to run the selected codemods in order. You can deselect anything
you don’t want. (Press <space> to select, <a> to toggle all, <i> to invert
selection, and <enter> to proceed)
 ◉ nuxt/4/absolute-watch-path
❯◉ nuxt/4/default-data-error-value
 ◉ nuxt/4/deprecated-dedupe-value
 ◉ nuxt/4/file-structure
 ◉ nuxt/4/shallow-function-reactivity
 ◉ nuxt/4/template-compilation-changes

$ pnpm dlx codemod@latest nuxt/4/migration-recipe

[1/2] 🔍 Resolving package from registry: https://app.codemod.com ...
⚠️ Package nuxt/4/migration-recipe is legacy
[2/2] 🏁 Running codemod: nuxt/4/migration-recipe
✔ Successfully fetched "nuxt/4/migration-recipe" from local cache.
? Press Enter to run the selected codemods in order. You can deselect anything
you don’t want. (Press <space> to select, <a> to toggle all, <i> to invert
selection, and <enter> to proceed)
 ◉ nuxt/4/absolute-watch-path
❯◉ nuxt/4/default-data-error-value
 ◉ nuxt/4/deprecated-dedupe-value
 ◉ nuxt/4/file-structure
 ◉ nuxt/4/shallow-function-reactivity
 ◉ nuxt/4/template-compilation-changes

※ nuxt/4/default-data-error-valueを実行すると該当するコードがある場合は、nuxt.config.tsに自動でuseFetch / useAsyncDataの初期値をnullにする設定が書き込まれる。

まとめ

Nuxt 3の公式サポート期限は2026年7月31日で、すでにサポートが終了しています。

サポート終了後もNuxt 3で構築したWebサイトを動かし続けることはできますが、今後新たな脆弱性が発見された場合に公式からセキュリティ修正が提供されない可能性があります。

Nuxt 3を使用しているWebサイトやWebアプリケーションは、Nuxt 4へのアップグレードを早めに検討しましょう。