Nuxt 3.5
⚡️ Vue 3.3 リリース
Vue 3.3 がリリースされました。特に型サポートに関して、多くのエキサイティングな機能が追加されています。
- 新しい
defineOptionsマクロ - 「ジェネリック」コンポーネント
- 型付きスロットと defineProps での外部型の使用
- ... その他
また、@antfu と @baiwusanyu-c の貢献により、ネストされたページ間を移動する際のデータフェッチが大幅に改善されました (#20777)。
詳細については、完全なリリース発表をご覧ください。
🙌 Nitropack v2.4
Nitro に対する多くの改善に取り組んでおり、これらは Nitro v2.4 で既に実装されています。このアップグレードには、多くのバグ修正、Cloudflare のモジュールワーカー形式の更新、Vercel KV サポートなどが含まれています。
注意点: Vercel または Netlify にデプロイし、インクリメンタル静的再生成の恩恵を受けたい場合は、ルート規則を更新する必要があります。
routeRules: {
-- '/blog/**': { swr: 3000 },
++ '/blog/**': { isr: 3000 },
}
完全なリリースノートをご覧ください。
💖 リッチ JSON ペイロード
リッチ JSON ペイロードのシリアライズがデフォルトで有効になりました (#19205, #20770)。これにより、Nuxt サーバーからクライアントに渡されるペイロード (およびプリレンダリングされたサイトのペイロードデータを抽出する際) で、より高速かつ複雑なオブジェクトのシリアライズが可能になります。
これは、さまざまなリッチ JS 型がすぐにサポートされることを意味します。正規表現、日付、Map および Set、BigInt、そして NuxtError、さらに ref、reactive、shallowRef、shallowReactive などの Vue 固有のオブジェクトもサポートされます。
テストスイートの例を参照してください。
これはすべて Rich-Harris/devalue#58 のおかげです。長い間、Nuxt はエラーやその他の非 POJO オブジェクトのシリアライズの問題により、devalue の独自のフォークを使用していましたが、現在は元のバージョンに戻りました。
新しいオブジェクト構文の Nuxt プラグインを使用して、独自のカスタム型を登録することもできます。
export default definePayloadPlugin(() => {
definePayloadReducer('BlinkingText', data => data === '<original-blink>' && '_')
definePayloadReviver('BlinkingText', () => '<revivified-blink>')
})
詳細については、こちらをご覧ください。
🛝 インタラクティブなサーバーコンポーネント
この機能は実験的なものと見なされるべきですが、@huang-julien の素晴らしい働きのおかげで、スロット を介してサーバーコンポーネント内のインタラクティブなコンテンツをサポートするようになりました (#20284)。
サーバーコンポーネントのロードマップは、#19772 をご覧ください。
⏰ 環境設定
nuxt.config で、完全に型付けされた環境ごとのオーバーライドを設定できるようになりました。
export default defineNuxtConfig({
$production: {
routeRules: {
'/**': { isr: true }
}
},
$development: {
//
}
})
レイヤーを作成している場合は、$meta キーを使用して、レイヤーの作成者または利用者が使用する可能性のあるメタデータを提供することもできます。
環境ごとのオーバーライドの詳細をご覧ください。
💪 完全に型付けされたページ
unplugin-vue-router との実験的な統合により、Nuxt アプリ内で完全に型付けされたルーティングを利用できるようになりました。これは、@posva の素晴らしい働きによるものです。
これにより、navigateTo、<NuxtLink>、router.push() などで型付きの使用がすぐに可能になります。
const route = useRoute('route-name') を使用して、ページ内で型付きパラメータを取得することもできます。
この機能を nuxt.config で直接有効にしてください
export default defineNuxtConfig({
experimental: {
typedPages: true
}
})
🔎 「バンドラー」モジュール解決
モジュール解決の bundler 戦略が Nuxt で完全にサポートされるようになりました。
可能な場合は、これを使用することをお勧めします。サブパスエクスポートの型サポートがありますが、Node16 解決よりも Vite や Nuxt などのビルドツールの動作に正確に一致します。
export default defineNuxtConfig({
typescript: {
tsConfig: {
compilerOptions: {
moduleResolution: 'bundler'
}
}
}
})
これにより、TypeScript が Node サブパスエクスポートを「追跡」する機能が有効になります。たとえば、ライブラリに mylib/path のようなサブパスエクスポートがあり、これが mylib/dist/path.mjs にマッピングされている場合、mylib/path.d.ts を作成する必要はなく、mylib/dist/path.d.ts から型をプルインできます。
⚗️ サーバータイプの分離
アプリの「nitro」部分と「vue」部分の IDE 内での明確さを改善する予定です。その最初の部分として、~/server ディレクトリ用に、別個に生成された tsconfig.json を出荷しました (#20559)。
次の内容で、追加の ~/server/tsconfig.json を追加して使用できます。
{
"extends": "../.nuxt/tsconfig.server.json"
}
現時点では、これらの値は型チェック (nuxi typecheck) 時には尊重されませんが、IDE でより良い型のヒントが得られるはずです。
💀 非推奨
Nuxt 2 の build.extend フックは型付けもドキュメント化もされていませんが、webpack ビルダー内で呼び出していました。これについては明示的に非推奨とし、今後のマイナーバージョンで削除します。
✅ アップグレード
通常どおり、アップグレードのおすすめは以下を実行することです。
npx nuxi upgrade --force
これにより、ロックファイルも更新され、特に unjs エコシステムにおいて、Nuxt が依存している他の依存関係からの更新を確実にプルインできます。
📃 完全な変更履歴
https://github.com/nuxt/nuxt/releases/tag/v3.5.0 で完全なリリースノートをご覧ください。