⚡️ 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。長期以來，由於序列化錯誤和其他非 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 策略。
如果可能，我們建議採用此方法。它支援子路徑匯出的類型支援，例如，但比 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。
⚗️ 分開的伺服器類型
我們計劃改善 IDE 中應用程式的「nitro」和「vue」部分之間的清晰度，我們已透過為您的 ~/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 上閱讀完整發布說明