🏘️ ルートグループ
パスに影響を与えることなくルートを整理するために、括弧/ブラケットでディレクトリに名前を付けることができるようになりました。
例
-| pages/
---| index.vue
---| (marketing)/
-----| about.vue
-----| contact.vue
これにより、アプリに /、/about および /contact ページが生成されます。 marketing グループは URL 構造の目的では無視されます。
元の PR で詳細をご覧ください。
🏝️ アイランドと Head メタデータ
サーバーコンポーネントアイランドが、レンダリング時に SEO メタデータを追加するなど、head を操作できるようになりました。
#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 で簡単に行うことができます。
export default defineNuxtConfig({
sourcemap: {
server: false,
client: true,
},
})
🎁 モジュール作者向けの新機能
Nuxt v4 のリリースに向けて、モジュール作者向けのいくつかの重要な機能の追加に取り組んでいます。これには、必要な場合に isNuxtMajorVersion ユーティリティ (#27579) や、新しい defineNuxtModule().with() メソッド (#27520) を使用したマージされたモジュールオプションのより優れた推論型付けなどが含まれます。
✨ 改善された開発警告
ミドルウェアでデータフェッチ可能なコンポーザブルを使用しているときに警告が表示されなくなりました (#28604)。また、ユーザーコンポーネントの名前が Lazy で始まる場合に警告が表示されるようになりました (#27838)。
🚨 Vue TypeScript の変更
しばらくの間、Vue エコシステムでは、カスタムプロパティなどを vue に追加するために @vue/runtime-core を拡張してきました。ただし、これにより、vue を拡張するプロジェクトの型が意図せず壊れてしまいます。これは現在、これらのインターフェイスを拡張する正式に推奨され文書化された方法です（たとえば、ComponentCustomProperties、GlobalComponents、など）。
これは、すべてのライブラリがコードを更新する必要があることを意味します（そうしないと、代わりに vue を拡張するライブラリの型が壊れます）。
私たちは Nuxt の型をこれに従って更新しましたが、まだ更新されていないライブラリと一緒に使用すると、最新の vue-router で問題が発生する可能性があります。
再現可能な問題を作成してください。問題のアップストリームライブラリで解決するための 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
これにより、ロックファイルも更新され、特に unjs エコシステムで Nuxt が依存する他の依存関係からの更新が確実にプルされます。
完全なリリースノート
このリリースに関わったすべての方々に心より感謝いたします。Nuxt を実現してくださったのは皆様です。❤️
フィードバックや問題がありましたら、お気軽にお知らせください。🙏