⚡️ Vue 3.3 已發布
Vue 3.3 已經發布，帶來許多令人興奮的功能，尤其是在類型支援方面。
- 新的
defineOptions巨集 - 「泛型」組件
- 類型化插槽以及在 defineProps 中使用外部類型
- ... 以及更多
這也顯著改善了在巢狀頁面之間導航時的資料獲取 (#20777)，感謝 @antfu 和 @baiwusanyu-c。
閱讀完整發布公告以了解更多詳情。
🙌 Nitropack v2.4
我們一直在努力改進 Nitro，這些改進已在 Nitro v2.4 中實裝 - 您可能已經升級到此版本，其中包含許多錯誤修復、Cloudflare 的模組 worker 格式更新、Vercel KV 支援等等。
注意事項：如果您要部署到 Vercel 或 Netlify 並希望從增量靜態再生中受益，您現在應該更新您的路由規則
routeRules: {
-- '/blog/**': { swr: 3000 },
++ '/blog/**': { isr: 3000 },
}
閱讀完整發布說明。
💖 豐富的 JSON 載荷
豐富的 JSON 載荷序列化現在預設啟用 (#19205, #20770)。這既更快，也允許在從 Nuxt 伺服器傳遞到客戶端的載荷中序列化複雜物件（以及在提取預渲染網站的載荷資料時）。
現在這表示各種豐富的 JS 類型都已開箱即用支援：正規表示式、日期、Map 和 Set 以及 BigInt，以及 NuxtError - 和 Vue 特定的物件，如 ref、reactive、shallowRef 和 shallowReactive。
您可以在我們的測試套件中找到 一個範例。
這一切都歸功於 Rich-Harris/devalue#58。長期以來，由於序列化 Errors 和其他非 POJO 物件的問題，Nuxt 一直使用我們自己的 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 內完全支援 模組解析 的 bundler 策略。
如果可能，我們建議採用此策略。它具有子路徑匯出 (subpath exports) 的類型支援，例如，但更精確地匹配了 Vite 和 Nuxt 等建構工具的行為，而不是 Node16 解析。
export default defineNuxtConfig({
typescript: {
tsConfig: {
compilerOptions: {
moduleResolution: 'bundler'
}
}
}
})
這開啟了 TypeScript「追蹤」Node 子路徑匯出 (subpath exports) 的能力。例如，如果一個函式庫具有像 mylib/path 這樣的子路徑匯出 (subpath export) 對應到 mylib/dist/path.mjs，那麼此路徑的類型可以從 mylib/dist/path.d.ts 中提取，而無需函式庫作者建立 mylib/path.d.ts。
⚗️ 分離伺服器類型
我們計劃改善您的 IDE 中應用程式的「nitro」和「vue」部分之間的清晰度，我們已透過為您的 ~/server 目錄 (#20559) 分離產生的 tsconfig.json 交付了此功能的第一部分。
您可以透過新增額外的 ~/server/tsconfig.json 並包含以下內容來使用
{
"extends": "../.nuxt/tsconfig.server.json"
}
雖然目前這些值在類型檢查時不會被採用 (nuxi typecheck)，但您應該在 IDE 中獲得更好的類型提示。
💀 棄用
雖然我們沒有對 Nuxt 2 的 build.extend hook 進行類型化或文件化，但我們一直在 webpack builder 中調用它。我們現在明確聲明棄用此 hook，並將在未來的次要版本中移除它。
✅ 升級
與往常一樣，我們建議的升級方式是執行
npx nuxi upgrade --force
這也會刷新您的 lockfile，並確保您從 Nuxt 依賴的其他依賴項（尤其是在 unjs 生態系統中）中提取更新。
📃 完整更新日誌
閱讀 https://github.com/nuxt/nuxt/releases/tag/v3.5.0 上的完整發布說明