Nuxt 3.5 正式發布,支持 Vue 3.3!
5 月 16 日,Nuxt 3.5.0 正式發布,它帶來了 Vue 3.3 版本、新的默認設置、交互式服務端組件、類型化頁面、環境配置等。
Vue 3.3
Vue 3.3 已經發布,具有許多令人興奮的特性,特別是在類型支持方面。包括:
- 宏中的導入和復雜類型支持
- 通用組件
- 更符合人體工程學的 defineEmits
- 使用 defineSlots 的類型插槽
- 響應式 Props 解構
- defineModel
- defineOptions
- 使用 toRef 和 toValue 實現更好的 getter 支持
- JSX 導入源支持
- 維護基礎設施改進
Nitropack v2.4
Nuxt.js 團隊一直致力于對 Nitro 進行大量改進,這些改進已經在 Nitro v2.4 中實現——其中包含許多錯誤修復、Cloudflare 模塊工作格式的更新、Vercel KV 支持等。
注意:如果需要部署到 Vercel 或 Netlify 并希望從增量靜態再生中受益,應該更新路由規則:
routeRules: {
-- '/blog/**': { swr: 3000 },
++ '/blog/**': { isr: 3000 },
}
豐富的 JSON 負載
現在默認啟用豐富的 JSON 負載序列化。這既更快又允許序列化從 Nuxt 服務端傳遞到客戶端的有效載荷中的復雜對象(以及在為預渲染站點提取有效載荷數據時)。
現在這意味著開箱即用地支持各種豐富的 JS 類型:正則表達式、日期、Map 和 Set 以及 BigInt 以及 NuxtError,以及 Vue 特定的對象,如 ref、reactive、shallowRef 和 shallowReactive。
長期以來,由于序列化 Errors 和其他非 POJO 對象的問題,Nuxt 一直在使用自己的 devalue fork,但現在已經過渡回原始版本。我們甚至可以使用新的對象語法Nuxt插件注冊自定義類型:
export default definePayloadPlugin(() => {
definePayloadReducer('BlinkingText', data => data === '<original-blink>' && '_')
definePayloadReviver('BlinkingText', () => '<revivified-blink>')
})
交互式服務端組件
這個功能應該被認為是高度實驗性的,現在通過插槽支持服務端組件內的交互式內容。
環境配置
現在可以在 nuxt.config 中配置完全類型化的、按環境的覆蓋:
export default defineNuxtConfig({
$production: {
routeRules: {
'/**': { isr: true }
}
},
$development: {
//
}
})
如果正在創作圖層,還可以使用 $meta 關鍵字來提供元數據,層的使用者可能會用到它。
完全類型化的頁面
通過與unplugin-vue-router的實驗性整合,可以在Nuxt應用中受益于完全類型化的路由。
開箱即用,這將啟用對navigateTo、<NuxtLink>、router.push()等功能的類型化使用。
甚至可以通過使用const route = useRoute('route-name')在頁面內獲取類型化的參數。
直接在nuxt.config中啟用此功能:
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。
分離的服務端類型
Nuxt 團隊計劃通過為~/server目錄生成單獨的tsconfig.json來改善IDE中"nitro"和"vue"部分之間的清晰度。
可以通過添加一個額外的~/server/tsconfig.json并使用以下內容來使用:
{
"extends": "../.nuxt/tsconfig.server.json"
}
雖然現在在類型檢查 (nuxi typecheck) 時不會考慮這些值,但應該在 IDE 中獲得更好的類型提示。
棄用內容
雖然沒有為 Nuxt 2 中的build.extend鉤子提供類型或文檔,但一直在webpack 中調用它,現在明確地棄用了它,并將在將來的小版本中刪除它。
升級
建議運行以下命令進行升級:
nuxi upgrade --force
這也將刷新 lockfile 文件,并確保從 Nuxt 依賴的其他依賴項中獲取更新,特別是在 unjs 生態系統中。
參考:https://nuxt.com/blog/v3-5