⚡️ Vue 3.3 リリース
Vue 3.3がリリースされ、特に型サポートに関して多くのエキサイティングな機能が追加されました。
- 新しい
defineOptionsマクロ - 「ジェネリック」コンポーネント
- 型付きスロットと、definePropsでの外部型の使用
- ...その他
これにより、ネストされたページ間を移動する際のデータ取得も大幅に改善されました (#20777)、これは@antfuGlobalComponents@baiwusanyu-c.
詳細については、完全なリリース発表をお読みください。
🙌 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.tsで完全に型付けされた、環境ごとのオーバーライドを設定できます。
export default defineNuxtConfig({
$production: {
routeRules: {
'/**': { isr: true }
}
},
$development: {
//
}
})
レイヤーを作成している場合は、$metaキーを使用して、あなたまたはレイヤーの利用者が使用するメタデータを提供することもできます。
詳細を読む環境ごとのオーバーライドについて.
💪 完全に型付けされたページ
Nuxtアプリ内で完全に型付けされたルーティングの恩恵を受けることができます。これは、unplugin-vue-routerとの実験的な統合によるものです。これは@posva!
の素晴らしい仕事のおかげです。これにより、navigateTo、<NuxtLink>、router.push()などの型付けされた使用がすぐに可能になります。
const route = useRoute('route-name')を使用することで、ページ内で型付けされたパラメーターを取得することもできます。
この機能は、nuxt.config.tsで直接有効にできます。
export default defineNuxtConfig({
experimental: {
typedPages: true
}
})
🔎 'Bundler' モジュール解決
Nuxt内で、モジュール解決のbundlerストラテジーを完全にサポートしました。モジュール解決.
可能であれば、これを採用することをお勧めします。これは、サブパスエクスポートの型サポートなどがありますが、Node16解決よりもViteやNuxtのようなビルドツールの動作に正確に一致します。
export default defineNuxtConfig({
typescript: {
tsConfig: {
compilerOptions: {
moduleResolution: 'bundler'
}
}
}
})
これにより、TypeScriptがNodeのサブパスエクスポートを「追跡」できるようになります。たとえば、ライブラリにmylib/pathのようなサブパスエクスポートがあり、それがmylib/dist/path.mjsにマップされている場合、この型の情報はmylib/dist/path.d.tsから取得でき、ライブラリの作者がmylib/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
これにより、ロックファイルも更新され、Nuxt が依存する他の依存関係、特に unjs エコシステムからの更新が取り込まれることが保証されます。
📃 全変更履歴
完全なリリースノートは以下で読むことができます。https://github.com/nuxt/nuxt/releases/tag/v3.5.0