リリース· 2025年9月2日

Nuxt 4.1

Nuxt 4.1 がリリースされました！ビルドの安定性の向上、開発体験の改善、そしてモジュール作成者向けの強力な新機能が追加されています。

ダニエル・ロー

@danielroe.dev

🔥 ビルドとパフォーマンスの改善

🍫 チャンク安定性の向上

インポートマップ ((翻訳者注: リンクが元の文書にないため、この括弧内にリンク先の内容を補完する必要があります)) により、ビルドの安定性が大幅に向上しました。#33075これにより、小さな変更を加えたときに、ビルドの大部分を無効にする可能性のある連鎖的なハッシュの変更が防止されます。

<!-- Automatically injected import map -->
<script type="importmap">{"imports":{"#entry":"/_nuxt/DC5HVSK5.js"}}</script>

デフォルトでは、Vite ビルドで出力される JS チャンクはハッシュ化され、変更不可でキャッシュされます。しかし、これにより重大な問題が発生する可能性があります。つまり、1つのコンポーネントを変更すると、*すべての*ハッシュが無効になり、404エラーが発生する可能性が大幅に高まります。

簡単に言うと

コンポーネントがわずかに変更されると、そのJSチャンクのハッシュが変更されます。
そのコンポーネントを使用するページは、新しいファイル名を参照するように更新する必要があります。
そのページを動的にインポートするため、*エントリー*のハッシュが変更されます。
エントリーファイル名が変更されたため、エントリーをインポートする*他のすべてのファイル*のハッシュが変更されます。

明らかに、これは最適ではありませんでした。この新機能により、エントリーをインポートする（それ以外は）変更されていないファイルのハッシュは影響を受けません。

この機能は自動的に有効になり、本番環境でのキャッシュ効率の向上に役立ちます。これにはネイティブなインポートマップのサポートが必要ですが、vite.build.target をインポートマップをサポートしないブラウザを含むように設定している場合、Nuxt は自動的にこの機能を無効にします。

そしてもちろん、必要であれば無効にすることもできます。

nuxt.config.ts

export default defineNuxtConfig({
  experimental: {
    entryImportMap: false
  }
})

🦀 実験的なRolldownサポート

Nuxt は現在、rolldown-vite ((翻訳者注: リンクが元の文書にないため、この括弧内にリンク先の内容を補完する必要があります)) の実験的なサポートを含んでいます。これにより、Rust を利用したバンドルで、ビルドの高速化が期待できます。#31812Rust を利用したバンドルにより、ビルドが高速化される可能性があります。

Nuxt プロジェクトで Rolldown を試すには、Nuxt の依存関係である Vite を Rolldown 対応バージョンでオーバーライドする必要があります。package.json に以下を追加してください。

{
  "overrides": {
    "vite": "npm:rolldown-vite@latest"
  }
}

{
  "pnpm": {
    "overrides": {
      "vite": "npm:rolldown-vite@latest"
    }
  }
}

{
  "resolutions": {
    "vite": "npm:rolldown-vite@latest"
  }
}

{
  "overrides": {
    "vite": "npm:rolldown-vite@latest"
  }
}

オーバーライドを追加した後、依存関係を再インストールしてください。Nuxt は Rolldown が利用可能であることを自動的に検出し、それに応じてビルド構成を調整します。

Rolldown の統合に関する詳細については、Vite Rolldown ガイド.

を参照してください。これは実験的な機能であり、いくつかの制限があるかもしれませんが、Nuxt における高性能なバンドルの未来を垣間見ることができます。

🧪 Lazy Hydration の改善

Lazy Hydration マクロが自動インポートなしで機能するようになりました ((翻訳者注: リンクが元の文書にないため、この括弧内にリンク先の内容を補完する必要があります))。これにより、コンポーネントの自動検出が無効になっている場合でも、より信頼性が高まります。#33037これにより、コンポーネントの自動検出が無効になっている場合でも、より信頼性が高まります。

<script setup>
// Works even with components: false
const LazyComponent = defineLazyHydrationComponent(
  'visible',
  () => import('./MyComponent.vue')
)
</script>

これにより、（例えば、設定で components が false に設定されているため）Nuxt を介して「検出」されないコンポーネントも、Lazy Hydration マクロで引き続き使用できるようになります。

実験的なルートルール抽出を有効にしている場合、これらは NuxtPage オブジェクトの専用の rules プロパティで公開されるようになりました ((翻訳者注: リンクが元の文書にないため、この括弧内にリンク先の内容を補完する必要があります))。これにより、モジュールからのアクセスが容易になり、全体的なアーキテクチャが改善されます。#32897)、これによりモジュールからのアクセスが容易になり、全体的なアーキテクチャが改善されます。

// In your module
nuxt.hook('pages:extend', pages => {
  pages.push({
    path: '/api-docs',
    rules: { 
      prerender: true,
      cors: true,
      headers: { 'Cache-Control': 's-maxage=31536000' }
    }
  })
})

defineRouteRules 関数は以前とまったく同じように機能しますが、モジュールとのより良い統合の可能性を提供します。

🚀 モジュール開発の強化

🪾 モジュールの依存関係と統合

モジュールが他のモジュールの依存関係を指定したり、オプションを変更したりできるようになりました ((翻訳者注: リンクが元の文書にないため、この括弧内にリンク先の内容を補完する必要があります))。これにより、モジュール間の統合が向上し、適切な設定順序が確保されます。#33063)。これにより、モジュール間の統合が向上し、適切な設定順序が確保されます。

export default defineNuxtModule({
  meta: {
    name: 'my-module',
  },
  moduleDependencies: {
    'some-module': {
      // You can specify a version constraint for the module
      version: '>=2',
      // By default moduleDependencies will be added to the list of modules 
      // to be installed by Nuxt unless `optional` is set.
      optional: true,
      // Any configuration that should override `nuxt.options`.
      overrides: {},
      // Any configuration that should be set. It will override module defaults but
      // will not override any configuration set in `nuxt.options`.
      defaults: {}
    }
  },
  setup (options, nuxt) {
    // Your module setup logic
  }
})

これは非推奨の installModule 関数に代わるもので、バージョン制約と設定のマージを伴うモジュールの依存関係を処理するより堅牢な方法を提供します。

🪝 モジュールライフサイクルフック

モジュール作者は、onInstall と onUpgrade の2つの新しいライフサイクル・フックにアクセスできるようになりました ((翻訳者注: リンクが元の文書にないため、この括弧内にリンク先の内容を補完する必要があります))。これらのフックを使用すると、モジュールは初めてインストールされたとき、または新しいバージョンにアップグレードされたときに、追加のセットアップ手順を実行できます。#32397)。これらのフックを使用すると、モジュールは初めてインストールされたとき、または新しいバージョンにアップグレードされたときに、追加のセットアップ手順を実行できます。

export default defineNuxtModule({
  meta: {
    name: 'my-module',
    version: '1.0.0',
  },

  onInstall(nuxt) {
    // This will be run when the module is first installed
    console.log('Setting up my-module for the first time!')
  },

  onUpgrade(inlineOptions, nuxt, previousVersion) {
    // This will be run when the module is upgraded
    console.log(`Upgrading my-module from v${previousVersion}`)
  }
})

このフックは、モジュールメタデータで name と version の両方が提供されている場合にのみトリガーされます。Nuxt は .nuxtrc ファイルを内部的に使用してモジュールのバージョンを追跡し、適切なフックをトリガーします。（以前にご存じなかったかもしれませんが、.nuxtrc ファイルはバージョン管理にコミットする必要があります。）

これは、モジュール作者が独自の「セットアップウィザード」を実装し始め、モジュールをインストールした後、何らかのセットアップが必要な場合に、より良いエクスペリエンスを提供できることを意味します。

🙈 ファイル解決の強化

resolveFiles の新しい ignore オプション ((翻訳者注: リンクが元の文書にないため、この括弧内にリンク先の内容を補完する必要があります)) を使用すると、モジュール作者はグロブパターンに基づいて特定のファイルを除外できます。#32858) を使用すると、モジュール作成者はグロブパターンに基づいて特定のファイルを除外できます。

// Resolve all .vue files except test files
const files = await resolveFiles(srcDir, '**/*.vue', {
  ignore: ['**/*.test.vue', '**/__tests__/**']
})

📂 レイヤーディレクトリユーティリティ

新しい getLayerDirectories ユーティリティ ((翻訳者注: リンクが元の文書にないため、この括弧内にリンク先の内容を補完する必要があります)) は、プライベートAPIに直接アクセスすることなくレイヤーディレクトリにアクセスするためのクリーンなインターフェースを提供します。#33098) は、プライベートAPIに直接アクセスすることなくレイヤーディレクトリにアクセスするためのクリーンなインターフェースを提供します。

import { getLayerDirectories } from '@nuxt/kit'

const layerDirs = await getLayerDirectories(nuxt)
// Access key directories:
// layerDirs.app        - /app/ by default
// layerDirs.appPages   - /app/pages by default
// layerDirs.server     - /server by default
// layerDirs.public     - /public by default

✨ 開発体験の改善

🎱 Kitユーティリティの簡素化

いくつかのキットユーティリティが開発体験向上のために改善されました。

addServerImports が単一インポートをサポートするようになりました ((翻訳者注: リンクが元の文書にないため、この括弧内にリンク先の内容を補完する必要があります))。#32289):

// Before: required array
addServerImports([{ from: 'my-package', name: 'myUtility' }])

// Now: can pass directly
addServerImports({ from: 'my-package', name: 'myUtility' })

🔥 パフォーマンス最適化

このリリースには、いくつかの内部パフォーマンス最適化が含まれています。

ルートルールキャッシュ管理の改善 ((翻訳者注: リンクが元の文書にないため、この括弧内にリンク先の内容を補完する必要があります))#32877)
アプリマニフェスト監視の最適化 ((翻訳者注: リンクが元の文書にないため、この括弧内にリンク先の内容を補完する必要があります))#32880)
ページメタデータのTypeScript処理の改善 ((翻訳者注: リンクが元の文書にないため、この括弧内にリンク先の内容を補完する必要があります))#32920)

🐛 注目すべき修正

useFetch フックの型付けを改善 ((翻訳者注: リンクが元の文書にないため、この括弧内にリンク先の内容を補完する必要があります))#32891)
ページメタデータ内のTypeScript式のより良い処理 ((翻訳者注: リンクが元の文書にないため、この括弧内にリンク先の内容を補完する必要があります))#32902, #32914)
ルートマッチングと同期の強化 ((翻訳者注: リンクが元の文書にないため、この括弧内にリンク先の内容を補完する必要があります))#32899)
開発環境でのVueサーバー警告の冗長性を低減 ((翻訳者注: リンクが元の文書にないため、この括弧内にリンク先の内容を補完する必要があります))#33018)
<NuxtTime> における相対時間計算のより良い処理 ((翻訳者注: リンクが元の文書にないため、この括弧内にリンク先の内容を補完する必要があります))#32893)

✅ アップグレード

いつものように、アップグレードには以下を実行することをお勧めします。

npx nuxt upgrade --dedupe

これにより、lockfile が更新され、特に unjs エコシステムからの Nuxt が依存するすべての最新の依存関係が取り込まれます。

📦 Nuxt 3.19

これらの機能はすべて Nuxt 3.19 でも利用可能で、v4.1 と同時にリリースされました。v3 ブランチへのコミットメントの一環として、互換性のある v4 の機能をバックポートし続け、v3 ユーザーが最新の改善点から恩恵を受けられるようにしています。

まだ Nuxt 3 を使用している場合、v3.19 にアップグレードすることで、安定版の v3 リリースラインに留まりながら、これらの機能すべてにアクセスできます。

完全なリリースノート

Nuxt v4.1.0 の完全なリリースノートを読む。

Nuxt v3.19.0 の完全なリリースノートを読む。

貢献してくださった皆様、ありがとうございます！これらの新機能で何が構築されるかを見るのが楽しみです。❤️

← ブログに戻る