Nuxt 3のサポート期限は2026年7月31日
Webサイトのフロントエンドフレームワークとして広く親しまれているNuxt 3ですが、公式サポート期限である2026年7月31日を過ぎています。
「現状問題なく動いている」「アップグレードする時間がない」といった理由でNuxt 3で運用したまま放置していませんか？
サポートが終了したフレームワークを使い続けることには、大きなセキュリティリスクと技術的負債が伴います。
Nuxtは日本企業のWebサイトでも採用されることが多いですが、現在もNuxt 3からアップグレードされていないWebサイトを見かけることがあります。
Nuxtが使用されているWebサイトの例
WebサイトでNuxtが使用されているかどうかは、デベロッパーツールのConsoleで以下のコマンドを実行するとわかります。
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 upgradepnpm nuxi upgrade実行後に選択肢が表示されたら、dedupe lockfile (recommended) を選択します。
pnpm nuxi upgradeを実行しただけでは@nuxt/devtoolsなどが更新されないので、pnpm update --latestなども実行しておくと良いです。
# 依存関係を完全に再取得
pnpm update --latest
# node_modules や .nuxt の再生成
rm -rf node_modules pnpm-lock.yaml .nuxt
pnpm i現在の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// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true },
compatibilityDate: "2026-08-10",
});最後に新しいディレクトリ構造(app/)へファイルを移行します。
app.vue ➡ app/app.vueerror.vue ➡ app/error.vuecomponents/ ➡ 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/file-structurenpmの場合
npx codemod@latest nuxt/4/file-structureこのコマンドを実行するとNuxt 4のファイル構造に自動で変更されます。
ただし、constsやscriptsなどの独自に命名したvueファイルが入ったディレクトリは自動でappディレクトリに移行しません。
そのようなディレクトリがある場合は、それらは手動でappディレクトリに移行してください。
Gitで未コミットのファイルがあると実行して良いか聞かれますので、問題なければ「y」を選択します。
? Current git state contains uncommitted changes. Proceed anyway? (y/N)以上の作業が完了した状態でpnpm dev (npm run dev)を実行すれば、Nuxt 4で起動できます。
codemodが使えない場合は、以下のコマンドでappディレクトリを作成して移動できます。
codemodは更新が止まっているので、仕事ではプロジェクトフォルダ内のappに移動する必要があるディレクトリ（ファイル）を調査して、以下のコマンドで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/; doneWindowsの場合
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
nuxt.config.tsでdefineNitroConfigのエラー
VS Code (Cursor) でnuxt.config.tsを開くと、「Cannot find name 'defineNuxtConfig'. Did you mean 'defineNitroConfig'?」というエラーメッセージが表示されることがあります。
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true },
compatibilityDate: '2026-08-11',
})VS Code のVue拡張機能で「Vue: Restart Vue and TS servers」を選択すれば、エラーメッセージは表示されなくなります。
まとめ
Nuxt 3の公式サポート期限は2026年7月31日で、すでにサポートが終了しています。
サポート終了後もNuxt 3で構築したWebサイトを動かし続けることはできますが、今後新たな脆弱性が発見された場合に公式からセキュリティ修正が提供されない可能性があります。
Nuxt 3を使用しているWebサイトやWebアプリケーションは、Nuxt 4へのアップグレードを早めに検討しましょう。
