これはおそらくNuxt v4より前の最後のマイナーリリースとなるため、皆様に喜んでいただける機能と改善を満載しました！ ✨
🪵 より良いロギング
Nuxtアプリケーションを開発し、アプリケーションでconsole.logを使用している場合、ページをリフレッシュすると（サーバーサイドレンダリング中）、これらのログがブラウザコンソールに表示されないことに気付いたかもしれません。これはアプリケーションのデバッグを困難にするため、フラストレーションの原因となる可能性があります。これはもはや過去のことです！
リクエストに関連付けられたサーバーログがある場合、それらはバンドルされ、クライアントに渡され、ブラウザコンソールに表示されるようになりました。非同期コンテキストは、これらのログを追跡し、それらをトリガーしたリクエストに関連付けるために使用されます。(#25936)。
例えば、このコード
<script setup>
console.log('Log from index page')
const { data } = await useAsyncData(() => {
console.log('Log inside useAsyncData')
return $fetch('/api/test')
})
</script>
は、ページをリフレッシュするとブラウザコンソールにログ出力されるようになります
Log from index page
[ssr] Log inside useAsyncData
at pages/index.vue
👉 今後、Nuxt DevToolsへの後続ログのストリーミングもサポートする予定です。
また、サーバーとクライアントの両方で呼び出されるdev:ssr-logsフック（NuxtとNitroの両方）を追加しました。これにより、必要に応じてログを自分で処理できます。
この問題が発生した場合は、ログを無効にするか、ブラウザコンソールへのログ出力を防ぐことができます。
export default defineNuxtConfig({
features: {
devLogs: false
// or 'silent' to allow you to handle yourself with `dev:ssr-logs` hook
},
})
🎨 プレビューモード
新しいusePreviewModeコンポーザブルは、Nuxtアプリでプレビューモードを簡単に使用できるようにすることを目的としています。
const { enabled, state } = usePreviewMode()
プレビューモードが有効になっている場合、useAsyncDataやuseFetchなどのすべてのデータフェッチコンポーザブルが再実行され、ペイロードにキャッシュされたデータはバイパスされます。
💰 キャッシュバスティングペイロード
Nuxtのアプリマニフェストを無効にしていない場合、ペイロードのキャッシュバスティングが自動的に行われるようになりました。つまり、デプロイ後に古いデータで立ち往生することはありません。(#26068)。
👮♂️ ミドルウェア routeRules
アプリケーションのVueアプリ部分（つまり、Nitroルートではない）内のページパスにミドルウェアを定義できるようになりました。(#25841)。
export default defineNuxtConfig({
routeRules: {
'/admin/**': {
// or appMiddleware: 'auth'
appMiddleware: ['auth']
},
'/admin/login': {
// You can 'turn off' middleware that would otherwise run for a page
appMiddleware: {
auth: false
}
},
},
})
⌫ 新しいclearデータフェッチユーティリティ
useAsyncDataとuseFetchは、clearユーティリティを公開するようになりました。これは、dataを未定義に設定し、errorをnullに設定し、pendingをfalseに設定し、statusをidleに設定し、現在保留中のリクエストをキャンセル済みとしてマークするために使用できる関数です。(#26259)
<script setup lang="ts">
const { data, clear } = await useFetch('/api/test')
const route = useRoute()
watch(() => route.path, (path) => {
if (path === '/') clear()
})
</script>
🕳️ 新しい#teleportsターゲット
Nuxtには、<body>タグ内のアプリに新しい<div id="teleports"></div>要素が含まれるようになりました。サーバーサイドのテレポートをサポートしているため、サーバー上で安全にこれを行うことができます
<template>
<Teleport to="#teleports">
<span>
Something
</span>
</Teleport>
</template>
🚦 ローディングインジケーターとトランジションコントロール
ローディングインジケーターを非表示にするためのカスタムタイミングを設定し、必要に応じてfinish()メソッドを強制できるようになりました。(#25932)。
また、その機能が有効になっている場合、View Transitions APIにフックするための新しいpage:view-transition:startフックもあります。(#26045)
🛍️ サーバー専用およびクライアント専用のページ
このリリースでは、サーバー専用およびクライアント専用のページがNuxtに登場します！ページに.server.vueまたは.client.vueサフィックスを追加して、自動的に処理できるようになりました。
**クライアント専用ページ**は、ページ全体が<ClientOnly>で囲まれているかのように、クライアント側で完全にレンダリングされ、サーバーサイドレンダリングを完全にスキップします。責任を持って使用してください。クライアント側での読み込みのフラッシュは、ユーザーエクスペリエンスが悪い可能性があるため、サーバー側の読み込みを回避する必要があることを確認してください。また、fallbackスロットを使用してスケルトンローダーをレンダリングする<ClientOnly>の使用も検討してください。(#25037)。
⚗️ **サーバー専用ページ**は、クライアントサイドナビゲーション内に完全にサーバーレンダリングされたHTMLを統合できるため、さらに便利です。それらへのリンクがビューポート内にあるとプリフェッチされるため、瞬時に読み込まれます。(#24954)。
🤠 サーバーコンポーネントの宝庫
サーバーコンポーネントを使用している場合、ツリー内の任意の場所でnuxt-client属性を使用できるようになりました。(#25479)。
export default defineNuxtConfig({
experimental: {
componentIslands: {
selectiveClient: 'deep'
}
},
})
コンポーネントの読み込みに問題が発生した場合にトリガーされるサーバーコンポーネントから@errorイベントをリッスンできます。(#25798)。
最後に、プロジェクトまたはそのレイヤー内にサーバー専用のコンポーネントまたはサーバー専用のページがある場合、サーバー専用のコンポーネントがスマートに有効になります。(#26223)。
🔥 パフォーマンスの向上
変更された仮想テンプレートのみを更新する(#26250)、プリレンダリング時にすべてをメモリに保持する代わりにファイルシステムにフォールバックする「階層化」プリレンダキャッシュ(#26104)を使用するなど、多くのパフォーマンスの向上を行いました。
📂 パブリックアセットの処理
Viteのパブリックアセット処理の再実装を行いました。つまり、public/ディレクトリまたはレイヤーディレクトリのパブリックアセットは、完全にNuxtによって解決されるようになりました(#26163)。そのため、カスタムプレフィックスでnitro.publicAssetsディレクトリを追加した場合、これらは機能するようになります。
📦 チャンクの命名
JSチャンクのデフォルトの_nuxt/[name].[hash].jsファイル名パターンを変更しました。現在、デフォルトは_nuxt/[hash].jsです。これは、コンポーネント名またはチャンク名に基づいて広告ブロッカーがトリガーされることによる誤検知を回避するためです。これは、デバッグが非常に難しい問題になる可能性があります。(#26203)。
必要に応じて、これを簡単に設定して以前の動作に戻すことができます
export default defineNuxtConfig({
vite: {
$client: {
build: {
rollupOptions: {
output: {
chunkFileNames: '_nuxt/[name].[hash].js',
entryFileNames: '_nuxt/[name].[hash].js'
}
}
}
}
},
})
💪 型の修正
以前は、shamefully-hoist=falseを使用しているユーザーは、型が解決されない、または正しく機能しないという問題が発生する可能性がありました。また、過剰な型のインスタンス化の問題が発生した可能性もあります。
ネストが深くても解決できるように、特定のキ-型についてTypeScriptに伝えるようになりました(#26158)。
インポート型(#26218 and #25965) and モジュールタイピング(#25548)に関するものなど、他にも多くの型の修正があります。
✅ アップグレード
いつものように、Nuxtをアップグレードするための推奨事項は、以下を実行することです
nuxi upgrade --force
これにより、ロックファイルもリフレッシュされ、Nuxtが依存している他の依存関係、特にunjsエコシステムからの更新を取得できます。
👉 完全なリリースノート
ここまでお読みいただきありがとうございます！新しいリリースをお楽しみいただければ幸いです。フィードバックや問題がありましたら、お知らせください。
ハッピーNuxting ✨