🏘️ ルートグループ
パスに影響を与えることなくルートを整理するために、ディレクトリ名を括弧やブラケットで指定できるようになりました。
例：
-| pages/
---| index.vue
---| (marketing)/
-----| about.vue
-----| contact.vue
これにより、アプリ内に /、 /about、 /contact ページが生成されます。marketing グループは URL 構造の目的では無視されます。
詳細はこちらでご確認ください元の PR.
🏝️ アイランドとヘッドメタデータ
サーバーコンポーネントアイランドで、レンダリング時に SEO メタデータを追加するなど、ヘッドを操作できるようになりました。
詳細はこちらでご確認ください#27987.
🪝 カスタムプリフェッチトリガー
NuxtLink 用のカスタムプリフェッチトリガーをサポートしました (#27846).
例：
<template>
<div>
<NuxtLink prefetch-on="interaction">
This will prefetch when hovered or when it gains focus
</NuxtLink>
<!-- note that you probably don't want both enabled! -->
<NuxtLink :prefetch-on="{ visibility: true, interaction: true }">
This will prefetch when hovered/focus - or when it becomes visible
</NuxtLink>
</div>
</template>
また、これらをアプリ全体でグローバルに有効/無効にしたり、リンクごとに上書きしたりすることも可能です。
例：
export default defineNuxtConfig({
experimental: {
defaults: {
nuxtLink: {
prefetch: true,
prefetchOn: { visibility: false, interaction: true }
}
}
}
})
🗺️ より優れたサーバーソースマップ
node --enable-source-maps で実行している場合、サーバービルド内の Vue ファイルのソースマップが Vite ビルド出力 ( .nuxt/dist/server/_nuxt/index-O15BBwZ3.js のようなもの) を指していることに気づいたかもしれません。
これで、Nitro ビルド後でも、サーバーソースマップは元のソースファイルを参照するようになります (#28521).
ビルドパフォーマンスを向上させる最も簡単な方法の 1 つは、使用していない場合はソースマップをオフにすることです。これは nuxt.config.ts で簡単に実行できます。
export default defineNuxtConfig({
sourcemap: {
server: false,
client: true,
},
})
🎁 モジュール作者向けの新機能
Nuxt v4 のリリースに向けて、新しい isNuxtMajorVersion ユーティリティ (必要な場合 (#27579)) や、新しい defineNuxtModule().with() メソッドを使用したマージされたモジュールオプションの推論型改善 (#27520).
) など、モジュール作者向けの主要な機能を追加する作業を進めています。
✨ 開発警告の改善#28604ミドルウェアでデータフェッチのコンポーザブルを使用した場合の警告は表示されなくなりました (#27838).
)。また、ユーザーコンポーネントの名前が Lazy で始まる場合に警告が表示されるようになりました (
🚨 Vue TypeScript の変更しばらくの間、Vue エコシステムでは @vue/runtime-core を拡張してカスタムプロパティなどを vue に追加していました。しかし、これは vue を拡張するプロジェクトの型を意図せず壊していました。現在では、これらのインターフェースを拡張する公式に推奨され、ドキュメント化された方法は、例えば, ComponentCustomPropertiesGlobalComponentsなどです。).
これは、すべてのライブラリがコードを更新する必要があることを意味します (そうしないと、代わりに vue を拡張するライブラリの型が壊れます)。
Nuxt ではこれらの変更に沿って型を更新しましたが、まだ更新していないライブラリと組み合わせて使用すると、最新の vue-router で問題が発生する可能性があります。
再現可能なイシューを作成してください。問題の upstream ライブラリで解決するための PR の作成を喜んでお手伝いします。あるいは、プロジェクトのルートに次のコードを含む declarations.d.ts を作成することで問題を回避できるかもしれません (クレジットは@BobbieGoedeに帰します。):
import type {
ComponentCustomOptions as _ComponentCustomOptions,
ComponentCustomProperties as _ComponentCustomProperties,
} from 'vue';
declare module '@vue/runtime-core' {
interface ComponentCustomProperties extends _ComponentCustomProperties {}
interface ComponentCustomOptions extends _ComponentCustomOptions {}
}
✅ アップグレード
いつものように、アップグレードには以下を実行することをお勧めします。
npx nuxi@latest upgrade --force
これにより、ロックファイルも更新され、Nuxt が依存する他の依存関係、特に unjs エコシステムからの更新が取り込まれることが保証されます。
完全なリリースノート
このリリースに貢献してくださった皆様に心から感謝いたします。皆様のおかげで Nuxt は実現しています。❤️
フィードバックや問題がありましたら、お気軽にお知らせください！ 🙏