--- title: "Nuxt 4とは？最新バージョンは4.6｜確認方法・Nuxt 3との違い・導入手順【2026年10月】" url: "https://www.issoh.co.jp/tech/details/9938/" published: 2025-11-21 updated: 2026-10-24 categories: ["Nuxt"] publisher: "株式会社一創" --- # Nuxt 4とは？最新バージョンは4.6｜確認方法・Nuxt 3との違い・導入手順【2026年10月】 Nuxt（読み方はナクスト）は、Vue.jsにルーティング・サーバー処理・ビルド設定をまとめて載せたフレームワークで、Nuxt 4はその現行メジャー版です。2026年10月24日時点の最新バージョンは**4.6.2（2026年10月16日公開）**です。4.6.0ではNode.jsの要件が上がり、同梱のCLIもv4になりました。この記事では、最新版とNode.js要件の推移、手元の版の確かめ方、Nuxt 3との違いと移行手順、4.6で入った `nuxt/server`、Piniaやlayoutの置き場所、Nuxt 5の予定までを扱います。いずれもNode.js 26.5.0の環境で実際にプロジェクトを作り、ビルドして確認しました。 ## まとめ：Nuxt 4の最新バージョンと導入・移行の要点 - 最新の安定版は4.6.2。4.6.0（2026年10月5日）は420以上のコミットを含む大きなマイナー版 - 4.6系のNode.js要件は22系の22.22.3以上、24系の24.15.0以上、または26.0.0以上。4.5系より下限が上がった - 手元の版は `npm ls nuxt` で見る。`npx nuxt --version` が返す4.0.1はCLIの版 - Nuxt 3からの主な変更は、app/ディレクトリ・データ取得の既定値・TypeScript設定の分割・unheadの更新の4点 - Nuxt 3は2026年7月31日にEOL。移行は `npx nuxt upgrade --dedupe` と公式codemodで進める - Nuxt 5は公式ロードマップ上「2026年第4四半期（見込み）」。サーバーコードを `nuxt/server` へ寄せておくと移行が軽くなる 以下、版の情報から順に根拠と手順を示します。Nuxtそのものの仕組みやレンダリング方式の選び方は[Nuxtの概要とレンダリング方式の解説](/tech/details/15790/)で扱っています。 ## Nuxt 4の位置づけ：Vue 3・Vite・Nitroを束ねるフルスタック構成 NuxtはVue 3の画面、Viteによる開発サーバーとビルド、Nitroによるサーバー実行環境を1つのプロジェクトにまとめます。`app/pages/` にファイルを置けばルートが生え、`server/api/` にファイルを置けばAPIが生える、というファイル規約が中心です。Nuxt 4.0.0は2025年7月15日（npmの公開時刻・UTC）に出ました。公式はNuxt 4を安定性重視のリリースと位置づけ、Nuxt 3で `compatibilityVersion: 4` として先行提供していた変更を既定値に昇格させています。 サーバー側を担うNitroの仕組みは[Nitroのサーバーエンジン解説](/tech/details/16483/)、ReactベースのNext.jsとの比較は[Next.jsとNuxtの違いの比較記事](/tech/details/2832/)にまとめています。 ## Nuxtの最新バージョンは4.6.2：リリース履歴とNode.js要件の推移 [npmレジストリの公開記録](https://www.npmjs.com/package/nuxt?activeTab=versions)から、各マイナー版の最初のリリースとNode.js要件（package.jsonの `engines.node`）を抜き出すと次のとおりです。4.4系は4.4.0と4.4.1がレジストリの版一覧（versions・time）に無く、4.4.2から始まっています。 | 版 | 公開日（UTC） | Node.js要件 | 主な変化 | | ----- | ---------- | ---------------------------- | ------------------- | | 4.0.0 | 2025-07-15 | 20.19.0以上／22.12.0以上 | Vite 7・Vue Router 4 | | 4.1.0 | 2025-09-02 | 同上 | Vite 7.1 | | 4.2.0 | 2025-10-25 | 同上 | Vue Router 4.6 | | 4.3.0 | 2026-01-22 | 同上 | Vite 7.3 | | 4.4.2 | 2026-03-12 | 同上 | Vue Router 5 | | 4.4.6 | 2026-05-18 | 22.12.0以上／24.11.0以上／26.0.0以上 | Node.js 20を除外 | | 4.5.0 | 2026-07-18 | 22.19.0以上／24.11.0以上／26.0.0以上 | Vite 8・unhead v3 | | 4.6.0 | 2026-10-05 | 22.22.3以上／24.15.0以上／26.0.0以上 | CLI v4・nuxt/server | | 4.6.2 | 2026-10-16 | 同上 | 2026年10月24日時点の最新 | Node.js要件の22系・24系は、それぞれの系列の中での下限です（23系や25系、24.0〜24.14は含みません）。4.6.1（10月9日）と4.6.2はどちらも修正中心のパッチ版です。4.6.2は[GHSA-vjh5-4×84-xrqp](https://github.com/nuxt/nuxt/security/advisories/GHSA-vjh5-4x84-xrqp)（深刻度medium）の修正版で、`/Admin` のように大文字小文字だけ違うパスでは、サーバー側の `routeRules`（`redirect`・`headers`・`proxy`・`ssr`）が適用されていませんでした。routeRulesで管理画面の転送やセキュリティヘッダーを設定しているなら、4.6.2未満から早めに上げます。 ### Nuxt 4.6で入った変更点 [4.6.0のリリースノート](https://github.com/nuxt/nuxt/releases/tag/v4.6.0)のうち、アプリ開発者に影響が大きいのは次の項目です。 - `nuxt/server`：サーバーコード用の新しいimport元。h3やnitropackから直接importせずにハンドラーを書ける（詳しくは後述） - `runtimeConfig.appSecret`（環境変数 `NUXT_APP_SECRET`）と、Cookieに封をする `useSession` - サーバールートから型を付ける `$fetch` の作り直し。ルート数が数百を超えると出ていたTS2589を避ける - Vue 3.6のVapor Modeを部分的に使える interop 対応。Vueの `^3.6.0-rc.2` 以上が前提 - `createUseFetch` と `createUseAsyncData` の `addons` オプション（フォーカス時の再取得やポーリングを自作の部品として足せる） - Viteだけでサーバーを組む `@nuxt/vite-server`。実験的な扱いで、既定はNitroのまま Vapor Modeはnpmの `vue` の安定版が2026年10月24日時点で3.5.44、3.6は3.6.0-rc.13のため、本番で使える段階ではありません。試すなら新規プロジェクトで行います。 ### Node.js要件の引き上げ：4.4.6・4.5.0・4.6.0の3回 Node.js要件の最初の引き上げは、マイナー版ではなくパッチ版の4.4.6（2026年5月18日）で入りました。4.4.5までは `^20.19.0 || >=22.12.0`、4.4.6からは `^22.12.0 || ^24.11.0 || >=26.0.0` です。Node.js 20は2026年4月30日にサポートが終わっており、それに合わせた変更です。`^4.4.0` のような範囲指定で依存を固定していると、ロックファイルを作り直しただけでNode.js 20のCIが要件外になります。 その後、4.5.0で22系の下限が22.19.0に、4.6.0で `^22.22.3 || ^24.15.0 || >=26.0.0` に上がりました。Node.js 22.22.3は2026年5月13日、24.15.0は2026年4月15日の公開です。CIやホスティングのNode.jsを先にこの版以上へ上げ、その後にNuxtを上げる順序にしてください。Node.jsの版の選び方は[Node.jsの版の選び方と標準機能の解説](/tech/details/17433/)にまとめています。 ## Nuxtのバージョン確認方法：`npx nuxt --version`の出力とCLIの版 プロジェクトに入っているNuxtの版を調べるとき、`npx nuxt --version` は使えません。2026年10月24日に作成したNuxt 4.6.2のプロジェクトでこのコマンドを実行すると、表示されたのは `4.0.1` でした。これはコマンドラインツール（npmパッケージ `@nuxt/cli`）の版です。4.6.0からCLIはv4系になったため、Nuxt本体の「4」と見分けがつきにくくなりました。 ``` # プロジェクトに入っているNuxt本体の版 npm ls nuxt # `-- nuxt@4.6.2 # CLI（@nuxt/cli）の版 npx nuxt --version # 4.0.1 # npmで公開されている最新の安定版 npm view nuxt version # 4.6.2 # Nuxt 3系の最新版（3xタグ） npm view nuxt dist-tags.3x # 3.21.11 ``` package.jsonの `"nuxt": "^4.6.2"` は許容範囲の指定で、実際に入っている版はロックファイル次第です。版の確認は `npm ls nuxt` かロックファイルで行い、package.jsonの表記を実際の版として報告しないようにします。 ## Nuxt 3とNuxt 4の違い：移行で直す4つの変更 [公式アップグレードガイド](https://nuxt.com/docs/4.x/getting-started/upgrade)のうち、移行前に確認したいのは次の4項目です。既存の配置や設定には後方互換があり、すべての項目で修正が必要になるわけではありません。 ### app/ディレクトリへの既定srcDirの変更 Nuxt 4では `srcDir` の既定値が `app/` になり、pages・components・layouts・middleware・composables・app.vueは `app/` の下に置きます。`server/`・`public/`・`modules/`・`layers/`・`shared/` はプロジェクト直下のままで、`~` エイリアスは `app/` を指します。 移動は必須ではなく、app/を作らずにpages/とapp.vueをプロジェクト直下に置いたNuxt 3の配置のままでもビルドできます。移行時はまず依存を上げて動かし、ディレクトリの移動は別のコミットに分けると差分を追いやすくなります。 ### useFetchとuseAsyncDataの既定値 `data` と `error` の初期値が `null` から `undefined` に変わりました。`default` オプションを指定していなければ、取得に失敗したときも `data` は `undefined` のままです（指定していればその戻り値が入ります）。どちらの場合も `data.value === null` で失敗を判定していたコードは素通りするため、`error` か `status` で判定するよう書き換えます。 ほかに、`data` が `shallowRef` になり配列やオブジェクトの深い変更では再描画されないこと、同じキーの呼び出しが `data`・`error`・`status` を共有することも変わっています。同じキーではhandler・deep・transform・pick・getCachedData・default・serialize・middlewareをそろえます（違うと開発時に `NUXT_E3004` の警告が出ます）。server・lazy・immediate・dedupe・watch・enabledは呼び出しごとに異なる値を指定できます。 ### TypeScript設定の分割 作成直後のtsconfig.jsonは `.nuxt/tsconfig.app.json`・`tsconfig.server.json`・`tsconfig.shared.json`・`tsconfig.node.json` の4つを参照するだけの形になります。アプリ側とサーバー側で型の文脈が分かれたため、アプリのコードからサーバー専用の型を参照していると型エラーになります。両方で使う型は `shared/` に置きます。 ### unheadの更新と廃止された設定 head管理がunhead v2になり、`vmid`・`hid`・`children`・`body` が削除されました。静的生成の `generate.routes` と `generate.exclude` も廃止され、`nitro.prerender` の `routes` と `ignore` へ移します。4.5系からはさらにunhead v3になり、`useHead` の型が厳しくなってPromiseの入力も受け付けません。`useHead` の型エラーはこの2段階の変更を疑います。 この4点のほか、ガイドにはレイヤー内のモジュール読み込み順の修正、コンポーネント名の正規化、ルートメタデータの重複排除、プリレンダー時のデータ共有、`error.data` のJSON解析なども載っています。レイヤーや `` を使っているプロジェクトは該当節を個別に確認してください。 ## Nuxt 3のサポート終了（EOL）と3系に残る場合の扱い Nuxt 3のEOLは2026年7月31日です。[公式ロードマップ](https://nuxt.com/docs/4.x/community/roadmap)は、3.xはバグ修正もセキュリティパッチも受け取らないと明記しています。EOL後の2026年8月5日に3.21.11が出ていますが、そのリリースノート自体が「Nuxt v3 is now end-of-life」と告げています。4.6.0のリリースノートも、Nuxt 3がEOLのため3.xの同時リリースは無いと書いており、10月24日時点で3.21.11が最後の3系です。 EOLの影響はすでに出ています。前述のGHSA-vjh5-4×84-xrqpは影響範囲にNuxt 3の全リリースを含みますが、修正版は4.6.2だけで、3系には出ていません。3系で `routeRules` の `redirect` や `headers` に保護を頼っている場合は、`router.options.sensitive: true` にする緩和策を検討します。 すぐに移行できない場合は、少なくとも3.21.11まで上げておきます。公式が示す3系の更新コマンドは `npx nuxt@latest upgrade --dedupe --channel=v3` です。EOL後も保守が必要な案件向けに、公式はパートナーのHeroDevsによる延長サポートを案内しています。Nuxt 3のまま新規開発を始める理由は、2026年10月時点ではありません。 ## Nuxt 4のインストール手順とプロジェクト構成 新規作成は `npm create nuxt@latest` で行います。CLI v4で `nuxt init` は削除され、`npx nuxt init my-app` を実行すると「Project scaffolding now lives in create-nuxt.」と表示されて終わります。 ``` npm create nuxt@latest my-app -- --template minimal --packageManager npm cd my-app npm run dev ``` minimalテンプレートで作ると、package.jsonの依存は `nuxt ^4.6.2`・`vue ^3.5.44`・`vue-router ^5.4.0` の3つで、画面側のファイルは `app/app.vue` だけです。nuxt.config.tsには `compatibilityDate: '2025-07-15'` と `devtools` の設定が入ります。インストールされたのはnitropack 2.13.5・h3 1.15.11・Vite 8.3.5でした。モジュールは作成時の `--modules` か、あとから `npx nuxt module add` で追加します。 ### サーバーAPIとuseFetchの最小構成 app.vueを `` を置く形に変えたうえで次の2ファイルを置き、`npm run build` した後、`node .output/server/index.mjs` で起動すると、トップページにAPIの結果が描画され、`/api/items?q=nit` は `[{"id":2,"name":"Nitro"}]` を返しました。ハンドラーは4.6の `nuxt/server` から明示的にimportしています。 ``` // server/api/items.get.ts import { defineEventHandler, getQuery } from 'nuxt/server' export default defineEventHandler((event) => { // ?q=a&q=b のように同名で複数指定されると配列になるため先頭を使う const { q } = getQuery<{ q?: string | string[] }>(event) const keyword = Array.isArray(q) ? q[0] : q const items = [{ id: 1, name: 'Nuxt' }, { id: 2, name: 'Nitro' }] return keyword ? items.filter(i => i.name.toLowerCase().includes(keyword.toLowerCase())) : items }) ``` ``` ``` pagesを使う場合、app.vueには `` を置きます。雛形のapp.vueは `` を表示するだけなので、pagesを作ってもそのままでは画面が切り替わりません。サーバー描画とクライアント描画の使い分けは[CSRとSSRの違いと使い分けの記事](/tech/details/5895/)を参照してください。 ## サーバーコードをnuxt/serverへ移す：4.6の新しいimport元とNUXT\_E8012 4.6で入った `nuxt/server` は、サーバー側のハンドラーとヘルパーをNuxt自身の型で提供します。公式の[Moving to nuxt/server](https://nuxt.com/docs/4.x/getting-started/upgrade#moving-to-nuxtserver)によると、ここから書いたファイルはNuxt 4（nitropack v2・h3 v1）でもNuxt 5（Nitro v3・h3 v2）でも同じまま動きます。移行は必須ではなく、h3から直接importする既存のハンドラーも4.5と同じように動きます。 注意点は、Nuxt 4では自動インポートされる `defineEventHandler` がh3 v1のものだという点です。自動インポートの `defineEventHandler` と `nuxt/server` の `readValidatedBody` を1つのファイルで混ぜたところ、本番ビルドは成功し、POSTすると次の500が返りました。 ``` [NUXT_E8012] `readValidatedBody` from `nuxt/server` was called with an h3 event. The handler was defined with h3's `defineEventHandler` (auto-imported), which passes a different event. Import `defineEventHandler` from `nuxt/server` alongside the helpers. ``` 対処は、ヘルパーと同じファイルで `defineEventHandler` も `nuxt/server` からimportすることです。h3 v1と挙動が違うヘルパーもあり、移すときは次の差を確認します。 | h3 v1 | nuxt/server | | -------------------------------------------- | ------------------------------------- | | `sendRedirect` が応答を送る | 応答を返すので `return` する | | `createError({ statusCode, statusMessage })` | `createError({ status, statusText })` | | `getRouterParam` はデコード済み | URLのまま。`{ decode: true }` で復号 | | `useRuntimeConfig(event)` | `useRuntimeConfig()` | | `readMultipartFormData(event)` | `await event.req.formData()` | `useStorage` や `defineCachedEventHandler` のように `nuxt/server` に無いヘルパーが要るハンドラーは、そのファイルだけh3か `nitropack/runtime` からのimportを続けます。そうしたファイルはNuxt 5で見直しが必要になるので、一覧にしておくと移行の見積もりに使えます。 ## Nuxt 3から4へのアップグレード手順 移行は次の順で進めます。Node.jsを先に上げるのは、4.6系が22.22.3未満の22系や24.15.0未満の24系では要件外になるためです。 1. CIと本番のNode.jsを22系の22.22.3以上、または24系の24.15.0以上に上げる 2. `npx nuxt upgrade --dedupe` でNuxtと関連依存を上げ、ロックファイルの重複を解消する 3. 公式codemodで機械的に直せる変更をまとめて当てる 4. `data.value === null` の判定、同じキーのuseFetch、`hid` を使ったhead設定を検索して手で直す 5. 型チェッカーを入れて `npx nuxt typecheck` と `npm run build` を通す（手で直した後の状態で確認する） ``` npx nuxt upgrade --dedupe npx codemod@0.18.7 nuxt/4/migration-recipe npm add -D vue-tsc typescript@6 npx nuxt typecheck ``` codemodは公式ガイドが `codemod@0.18.7` に版を固定して案内しているので、`@latest` に変えずにそのまま使います。ディレクトリ移動やimportの書き換えのような機械的な変更を当てるもので、データ取得の判定ロジックまでは直しません。4番目の検索は必ず人の目で行い、直した後に5番目の型チェックとビルドを回してください。 型チェックには事前の準備が要ります。CLI v4の `nuxt typecheck` は型チェッカーが無いと終了コード1で止まり、vue-tscかGolarの導入を求めます。`npm add -D typescript vue-tsc` と版を指定せずに入れると、2026年10月24日時点ではTypeScript 7.0.2が入り、vue-tsc 3.3.13が `ERR_PACKAGE_PATH_NOT_EXPORTED` で起動しませんでした。`typescript@6`（6.0.3）を指定すると型チェックが通りました。 ## Nuxt 4とPiniaの連携：@pinia/nuxt 1.0とPinia 4 2026年10月時点の組み合わせは、`pinia 4.1.0` と `@pinia/nuxt 1.0.3`（どちらも10月14日公開）です。@pinia/nuxt 1.0.3はpeer依存として `pinia ^4.1.0` を要求し、モジュールの互換指定はNuxt 3.15以上・4・5です。 ``` npm i pinia @pinia/nuxt ``` ``` // nuxt.config.ts export default defineNuxtConfig({ compatibilityDate: '2025-07-15', modules: ['@pinia/nuxt'] }) ``` ``` // app/stores/counter.ts export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), actions: { increment() { this.count++ } } }) ``` `app/stores/` に置いたストアは自動でimportされ、ページで `const counter = useCounterStore()` と書くだけで使えます。Nuxt 4.6.2の上でこの構成をビルドし、サーバー描画された初期値 `count: 0` が表示されることを確認しました。Pinia 4はESMのみの配布になった点など、Pinia側の変更は[Pinia 4対応のPinia解説](/tech/details/3513/)で詳しく扱っています。 ## layout・middleware・i18nの置き場所 Nuxt 4ではlayoutとルートmiddlewareも `app/` の下に置きます。次の例はCookieの有無で画面遷移を分けるだけで、トークンの正当性や権限は検証しません。認証・認可が必要なAPIでは、サーバー側でもセッションと権限を検証してください。 ``` // app/middleware/auth.ts export default defineNuxtRouteMiddleware(() => { if (!useCookie('token').value) { return navigateTo('/') } }) ``` ``` ``` `app/layouts/default.vue` と `app/layouts/admin.vue` を用意し、app.vueで `` を `` で囲むと、上のページはCookieが無ければ302で `/` へ転送され、Cookieがあればadminレイアウトで描画されました。4.5で入った `useLayout()` は読み取り専用のcomputed refを返し、この例では `layout.value` が `'admin'` になります。 上のauth.tsをそのままグローバル化すると、Cookieがないときに転送先のトップページでも再転送が発生します。全ページで動かすmiddlewareは `auth.global.ts` のようにファイル名に `.global` を付け、転送先を判定から除外してください。APIリクエストに挟む処理は `server/middleware/` に置き、こちらはNitro側の別の仕組みです。 多言語化の `@nuxtjs/i18n` は2026年10月24日時点で10.6.0（7月30日公開）が最新です。10系は翻訳ファイルをプロジェクト直下の `i18n/locales/` から読むのが既定で、`app/` の下ではありません。PWAについては、`@nuxtjs/pwa` がNuxt 3にも対応しておらず、Nuxt 4では選択肢になりません。 ## Nuxt 5の開発状況とcompatibilityVersion: 5での先行確認 公式ロードマップは、Nuxt 5の初回リリースを「Q4 2026 (estimated)」、4.xのEOLを「5.x公開の6か月後」としています。確定日はまだ出ていません。Nuxt 5ではNitro v3とh3 v2への更新が予定され、nightlyチャンネルには2026年10月23日公開の5.0.0開発版があります。 Nuxt 4.2以降は、設定で `future.compatibilityVersion` を5にするとNuxt 5の既定値を先に試せます。4.6では型付きページ、型付き `$fetch`、大文字小文字を区別するルーティング、Nitroの自動インポート無効化、Options APIの無効化などがこのフラグにまとまりました。 ``` export default defineNuxtConfig({ future: { compatibilityVersion: 5 } }) ``` この記事のサンプルに、比較用として自動インポートの `defineEventHandler` だけで書いたAPIを1本足し、この設定で4.6.2をビルドすると、ビルドは成功しました。ただし起動すると、比較用のAPIは `ReferenceError: defineEventHandler is not defined` で500になり、`pages/admin.vue` に `/Admin` でアクセスすると404になりました。`nuxt/server` から明示的にimportしたAPIと、Composition APIで書いたページ・オプション形式のPiniaストアは動きました。 ビルドが通ることは、Nuxt 5で動く保証になりません。このフラグを試すときは `npx nuxt typecheck` も回してください。上のサンプルでは比較用のAPIのファイルが `TS2304: Cannot find name 'defineEventHandler'` として検出されました。Options APIのコンポーネントを多く抱えている場合は影響が大きいため、[Composition APIとOptions APIの違いと移行判断](/tech/details/3589/)を参考に書き換えの範囲を先に見積もってください。 ## よくある質問 ### Nuxtの読み方は？ ナクストと読みます。公式サイトはnuxt.comで、Nuxt.jsと表記されることもあります。 ### Nuxtの最新バージョンは？ 2026年10月24日時点の最新の安定版は4.6.2（2026年10月16日公開）です。最新の版は `npm view nuxt version`、手元の版は `npm ls nuxt` で確認できます。 ### Nuxt 4に必要なNode.jsのバージョンは？ 4.6系は22系の22.22.3以上、24系の24.15.0以上、または26.0.0以上に対応します。4.5系は22系の22.19.0以上、24系の24.11.0以上、または26.0.0以上です。Node.js 20は4.4.6から対象外です。 ### Nuxt 3はいつまで使える？ EOLは2026年7月31日で、8月5日の3.21.11が最後の3系です。以降は公式の修正が出ないため、Nuxt 4への移行を進めてください。 ### Nuxt 5はいつ出る？ 公式ロードマップの見込みは2026年第4四半期です。確定日は出ておらず、`future.compatibilityVersion: 5` で変更点を先に確かめられます。 ## 関連記事 - [Nuxtとは：Vue.jsとの違い・レンダリング方式・4系への移行手順と採用判断を実装視点で解説](/tech/details/15790/) - [Next.jsとNuxtの違いを比較｜React・Vueとの関係と選び方【2026年7月版】](/tech/details/2832/) - [Piniaとは？読み方・使い方とVuexとの違い【Pinia 4対応】](/tech/details/3513/) - [Nitroとは？Nuxtを支えるサーバーエンジンの仕組みとv3移行の判断軸を解説](/tech/details/16483/) - [NuxtRouteAnnouncerの使い方｜props・読み上げられない原因とNuxtAnnouncerとの使い分け](/tech/details/2827/) --- 出典: [Nuxt 4とは？最新バージョンは4.6｜確認方法・Nuxt 3との違い・導入手順【2026年10月】]()（株式会社一創）