Nuxt 3.6

 SPAローディングインジケータ

もしあなたのサイトがssr: falseで提供されている場合、または一部のページでサーバーサイドレンダリングを無効にしている場合、新しい組み込みのSPAローディングインジケータ.

に特に興味があるかもしれません。これで、~/app/spa-loading-template.htmlにHTMLファイルを配置して、これらのページでアプリがハイドレートされるまでレンダリングされるローディング画面をレンダリングするために使用したいHTMLを配置できます。

👉 デフォルトではアニメーション付きのNuxtアイコンがレンダリングされます。nuxt設定ファイルでspaLoadingTemplate: falseを設定することで、このインジケータを完全に無効にできます。

⚡️ パフォーマンスの向上

アプリがハイドレートされるときに最初に行われることは、プラグインが実行されることです。そのため、今回はプラグインのビルド時最適化を実行します。これにより、ランタイムで正規化や並べ替えをする必要がなくなります。

また、エラーコンポーネントのJSをメインのエントリーポイントに含めることで、ユーザーが接続できないときにエラーが発生した場合でも、~/error.vueで処理できるようになりました。（これにより、合計バンドルサイズも減少するはずです。）

👉 Nuxt 3.5.3と比較して、最小クライアントバンドルが約0.7kB減少しました。この調子でいきましょう！

🔥 完全に静的なサーバーコンポーネント

静的ページでサーバーコンポーネントを使用することは可能でしたが、これまではアプリケーションのペイロードサイズを増加させていました。これはもはや当てはまりません。今後は、レンダリングされたサーバーコンポーネントを別のファイルとして保存し、ナビゲーション前にプリロード.

します。👉 これは新しい、よりリッチなJSONペイロード形式に依存しています。したがって、experimental.renderJsonPayloadsをfalseに設定して無効にしていないことを確認してください。

🎨 スタイルインライン化の改善

メトリクスを注意深く監視しており、experimental.inlineSSRStylesをオフにしていない場合、ページにより多くのCSSがインライン化され、外部CSSファイルが大幅に減少していることに気づくはずです。今回、グローバルCSSの重複排除が改善されました。特にtailwindやunocssなどのライブラリによって追加されたCSSに効果があります。

🎬 アニメーションコントロール

GSAPなどのライブラリでカスタムトランジションを作成するなど、ページ/レイアウトコンポーネントをより細かく制御できるように、今回、<NuxtPage>にpageRefGlobalComponents<NuxtLayout>にlayoutRefを設定できるようになりました。これらは基になるDOM要素に渡されます。

✨ 自動「静的」プリセット検出

これまでは、nuxt generateを実行すると、すべてのデプロイメントプロバイダーで同じ出力が生成されていましたが、Nuxt 3.6からは静的プロバイダープリセットが自動的に有効になります。つまり、サポートされているプロバイダー（現在VercelとNetlify、CloudflareとGitHub Pagesが近日中に対応予定）に静的ビルド（nuxt generateで生成）をデプロイする場合、そのプロバイダーに特化したサポート付きでページがプリレンダリングされます。

これにより、サーバー機能を必要としないルーティングルール（リダイレクト/ヘッダーなど）を設定できます。したがって、ランタイムSSRを必要としないサイトをデプロイする際には、両方の利点が得られます。また、Nuxt ImageをVercelで使用できるようになります（今後、自動プロバイダー連携の可能性も広がります）。

💪 型安全性の向上

Nuxt 3.5で導入された新しい~/server/tsconfig.jsonを使用している場合、サーバー固有の#importsとaugmentationsのサポートが向上しました。これにより、サーバーディレクトリで#importsからインポートすると、Nitroの正しいインポート場所のIDE自動補完が得られ、サーバールートでは使用できないuseFetchのようなVueの自動インポートは表示されなくなります。

これで、ランタイムNitroフックの型サポート.

も利用できるようになります。最後に、オブジェクトがデフォルトでany型を持つ多くの場所を削除しました。これにより、指定されていない型がanyにフォールバックしていたNuxt内のいくつかの場所で型安全性が向上するはずです。

• RuntimeConfig
• PageMeta
• NuxtApp['payload'] （NuxtPayloadインターフェースからアクセス可能になりました）
• ModuleMeta

これがあなたに影響する場合のコードの更新方法については、元のPRで詳しく知ることができます。

⚗️ Nitro 2.5を内蔵

このリリースには新しいNitro 2.5が搭載されており、数多くの魅力的な改善点があり、確認する価値があります。

特に注目すべきは、ストリーミングの実験的なサポートであり、これもNuxt自体でのいくつかの変更によって可能になっています。

🛠️ モジュール作成者向けの新しいツール

このリリースには、モジュール作成者が簡単に型テンプレートを追加GlobalComponentsし、指定された別のモジュール

のバージョンとの互換性を主張するための多くのユーティリティが含まれています。さらに、このリリースにより、モジュール作成者の型サポートを向上させる新しいnuxt/module-builderモードがついにアンロックされます。モジュール作成者の方は、近日中に試すためにこれらの移行手順を検討してみてください。

✅ アップグレード

いつものように、アップグレードには以下を実行することをお勧めします。

npx nuxi upgrade --force

これにより、ロックファイルも更新され、Nuxt が依存する他の依存関係、特に unjs エコシステムからの更新が取り込まれることが保証されます。

📃 全変更履歴

https://github.com/nuxt/nuxt/releases/tag/v3.6.0でリリースノート全文を読む