Nuxt 3.9
このリリースに関わったすべてのNuxtチームメンバーから、皆様とご家族にメリークリスマス！🎁🎄
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コンポーザブルと同様に、コンポーネントのsetup関数またはNuxtプラグインで呼び出す必要があります。
🚨 エラータイプ
しばらくの間、useAsyncDataとuseFetchによって返されるエラーは、Errorとしてかなり一般的に型付けされていました。実際に受け取る内容の観点から、より正確にするために、型の可能性を大幅に改善しました。（h3のcreateErrorユーティリティを使用してエラーを正規化しているため、サーバーからクライアントにシリアル化できます）。
下位互換性のある方法で型の変更を実装しようとしましたが、これらのコンポーザブルのジェネリクスを手動で設定している場合、ジェネリクスを更新する必要があることに気付くかもしれません。詳細については（#24396）を参照してください。問題が発生した場合はお知らせください。
🔥 スキーマのパフォーマンス
このリリースでは、マイナーなパフォーマンスの改善に時間を費やしました。そのため、いくつかの処理が少し速くなったことに気付くはずです。これは進行中のプロジェクトであり、Nuxt開発サーバーの初期ロード時間を改善するためのアイデアがあります。
✅ アップグレード
いつものように、アップグレードの推奨事項は、以下を実行することです。
npx nuxi upgrade
完全なリリースノート
ここまで読んでいただきありがとうございます！新しいリリースをお楽しみいただければ幸いです。フィードバックや問題がありましたら、お知らせください。
Happy Nuxting ✨