このリリースに関わったすべての Nuxter から、皆様にメリークリスマス！🎁🎄
v3.9 には多くの機能が詰め込まれており、皆様に試していただけることを楽しみにしています。
⚡️ Vite 5
このリリースには Vite 5 と Rollup 4 のサポートが含まれています。モジュール作成者は、作成している Vite プラグインがこれらの最新リリースと互換性があることを確認する必要がある場合があります。
これにより、多くの素晴らしい改善点とバグ修正が含まれています。Vite の変更履歴で詳細を確認してください。
✨ Vue 3.4 対応
このリリースは、最新の Vue 3.4 リリース候補でテストされており、Vue 3.4 の新機能を活用するために必要な設定が含まれています。これには、本番環境でのハイドレーションエラーのデバッグが含まれます（Nuxt 設定で debug: true を設定するだけです）。
👉 活用するには、v3.4 がリリースされたら vue のバージョンを更新するか、今すぐリリース候補を試してください。
{
"dependencies": {
"nuxt": "3.9.0",
"vue": "3.4.0-rc.1",
"vue-router": "latest"
}
}
🏝️ インタラクティブなサーバーコンポーネント
これは非常に実験的なアップデートですが、Nuxt サーバーコンポーネント内でインタラクティブなコンポーネントを試すことが可能になりました。この新機能は、コンポーネントアイランドに加えて有効にする必要があります。
export default defineNuxtConfig({
experimental: {
componentIslands: {
selectiveClient: true
}
}
})
サーバーコンポーネント内で、nuxt-client ディレクティブを使用して、ハイドレートするコンポーネントを指定できるようになりました。
<NuxtLink :to="/" nuxt-client />
これにはかなり興奮しています。ぜひどのように使っているか教えてください！🙏
🔥 自動サーバー最適化
Vite の新しい AST 対応の 'define' を使用して、サーバーサイドコードに対してより正確な置換を実行するようになりました。これにより、このようなコードがエラーをスローすることはなくなります。
<script setup lang="ts">
if (document) {
console.log(document.querySelector('div'))
}
</script>
これまでこれは不可能でした。アプリの非 JS 部分で document のような通常の単語を誤って置換するリスクを避けたいと考えていたためです。しかし、Vite の新しい define 機能は esbuild によって強化されており、構文認識機能があるため、この機能を自信を持って有効にできます。それでも、必要に応じてオプトアウトできます。
export default defineNuxtConfig({
hooks: {
'vite:extendConfig' (config) {
delete config.define!.document
}
}
})
🚦 粒度の高いローディング API
<NuxtLoadingIndicator> 用の新しいフックベースのシステムが導入されました。これには、ローディング状態を制御/停止/開始できる useLoadingIndicator コンポーザブルが含まれます。必要に応じて page:loading:start と page:loading:end にフックすることもできます。
🏁 callOnce で一度だけイベントを実行
ページを何回読み込んでも一度だけコードを実行したい場合があり、サーバーで実行された場合はクライアントで再度実行したくない場合があります。
このために、新しいユーティリティ callOnce があります（#24787).
<script setup>
const websiteConfig = useState('config')
await callOnce(async () => {
console.log('This will only be logged once')
websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})
</script>
このユーティリティはコンテキスト認識型であるため、他の Nuxt コンポーザブルと同様に、コンポーネントのセットアップ関数または Nuxt プラグイン内で呼び出す必要があります。
🚨 エラー型
これまで、useAsyncData および useFetch から返されるエラーは、Error として一般的に型付けされていました。実際に受け取る内容に関してより正確になるように、それらの型付けの可能性を大幅に改善しました。（例えば、サーバーからクライアントへシリアル化できるように、内部では h3 createError ユーティリティでエラーを正規化しています。）
型変更は後方互換性のある方法で実装しようとしましたが、これらのコンポーザブルのジェネリクスを手動で設定している場合は、ジェネリクスを更新する必要があることに気付くかもしれません。詳細については（#24396）を参照し、何か問題が発生した場合はお知らせください。
🔥 スキーマのパフォーマンス
このリリースでは、いくつかの小さなパフォーマンス改善に時間をかけました。そのため、いくつかの処理が少し高速になったことに気付くはずです。これは進行中のプロジェクトであり、Nuxt 開発サーバーの初期ロード時間を改善するためのアイデアがあります。
✅ アップグレード
いつものように、アップグレードには以下を実行することをお勧めします。
npx nuxi upgrade
完全なリリースノート
ここまで読んでいただきありがとうございます！新しいリリースを楽しんでいただけると幸いです。フィードバックや問題がありましたら、ぜひお知らせください。
ハッピーNuxting ✨