Nuxt 3.6

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

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

これで、アプリがこれらのページでハイドレーションされるまでレンダリングされるローディング画面を表示するために使用したいHTMLを含むHTMLファイルを~/app/spa-loading-template.htmlに配置できます。

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

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

アプリがハイドレーションされるときに最初に発生するのはプラグインの実行です。そのため、プラグインに対してビルド時の最適化を実行するようになりました。これにより、実行時に正規化または並べ替えを行う必要がなくなりました。

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

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

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

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

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

🎨 より良いスタイルのインライン化

メトリックを注意深く監視しており、experimental.inlineSSRStylesをオフにしていない場合は、ページにさらに多くのCSSがインライン化され、外部CSSファイルが大幅に小さくなっているのがわかるはずです。特にtailwindやunocssのようなライブラリによって追加されたグローバルCSSの重複排除が向上しました。

🎬 アニメーション制御

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

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

これまで、nuxt generateを実行すると、すべてのデプロイプロバイダーで同じ出力が生成されましたが、Nuxt 3.6では、静的プロバイダープリセットが自動的に有効になりました。つまり、サポートされているプロバイダー（現在、vercelとnetlifyで、cloudflareとgithub pagesは近日公開予定）に静的ビルド（nuxt generateで生成）をデプロイする場合、そのプロバイダーを特別にサポートしてページをプリレンダリングします。

つまり、サーバー関数を必要としないルートルール（リダイレクト/ヘッダーなど）を構成できます。したがって、ランタイムSSRを必要としないサイトをデプロイする場合は、両方の長所が得られるはずです。また、VercelでのNuxt Imageの使用もブロック解除されます（自動プロバイダー統合の可能性が近日公開予定）。

💪 型安全性の向上

Nuxt 3.5で提供した新しい~/server/tsconfig.jsonを使用している場合は、サーバー固有の#importsと拡張機能のサポートが向上しました。したがって、サーバーディレクトリの#importsからインポートすると、Nitroの正しいインポート場所のIDEオートコンプリートが得られ、サーバールート内で使用できないuseFetchのようなVueオートインポートは表示されません。

また、ランタイムNitroフックの型サポートも必要です。

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

• RuntimeConfig
• PageMeta
• NuxtApp['payload'] (現在、NuxtPayloadインターフェースからアクセス可能)
• ModuleMeta

この影響を受ける場合にコードを更新する方法の詳細については、元のPRをご覧ください。

⚗️ Nitro 2.5 組み込み

このリリースには、多くの素晴らしい改善点が含まれている新しいNitro 2.5が同梱されています。ぜひチェックしてください。

特に注目すべきはストリーミングの実験的なサポートです。これはNuxt自体にもいくつかの変更が加えられたことで有効になっています。

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

このリリースでは、モジュール作成者が型テンプレートを簡単に追加したり、他のモジュールの特定のバージョンとの互換性をアサートしたりするための多くのユーティリティが導入されました。

さらに、このリリースでは、モジュール作成者の型サポートを改善するはずの新しいnuxt/module-builderモードがついに有効になります。モジュール作成者の場合は、今後の数日間でこれらの移行手順に従って試してみることを検討してください。

✅ アップグレード

通常、アップグレードに関する推奨事項は、次のコマンドを実行することです。

npx nuxi upgrade --force

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

📃 完全な変更ログ

https://github.com/nuxt/nuxt/releases/tag/v3.6.0で完全なリリースノートをお読みください。