透過 100 多個技巧集合學習 Nuxt!
發布·  

Nuxt 3.15

Nuxt 3.15 已發布 - 搭載 Vite 6、更佳的 HMR 及更快的效能

我們持續致力於 Nitro v3、Nuxt v4 及更多版本的發布。但我們很高興能在聖誕節前及時發布 Nuxt v3.15。

❄️ 下雪了!

佳節愉快!當您啟動 Nuxt 時,您會注意到(如果您在北半球)載入畫面上有雪花(#29871)。

⚡️ 包含 Vite 6

Nuxt v3.15 首次包含 Vite 6。儘管這是一個主要版本,但我們預期這對 Nuxt 使用者來說不會是重大變更(請參閱完整遷移指南)。然而,如果您有依賴特定 Vite 版本的相依性,請多加留意。

Vite 6 最顯著的變更之一是新的 Environment API,我們希望將其與 Nitro 結合使用,以改善伺服器開發環境。敬請期待!

您可以在 Vite 6 更新日誌中閱讀完整的變更列表。

🪵 Chromium 開發者工具改進

我們經常談論 Nuxt DevTools,但 v3.15 版本在開發模式中針對基於 Chromium 的瀏覽器開發者工具提供了更佳的整合。

我們現在使用 Chrome DevTools 擴充性 API,以在瀏覽器開發者工具效能面板中新增對列印 nuxt hook 時序的支援。

CleanShot 2024-11-14 at 15 05 22@2x

🗺️ callOnce 的導航模式

callOnce 是一個內建的 Nuxt composable,用於僅執行一次程式碼。例如,如果程式碼在伺服器上執行,則不會在用戶端再次執行。但有時您確實希望程式碼在每次導航時都執行 - 只是為了避免初始的伺服器/用戶端雙重載入。為此,有一個新的 mode: 'navigation' 選項,它將每次導航僅執行一次程式碼。(請參閱 #30260 以獲取更多資訊。)

await callOnce(() => counter.value++, { mode: 'navigation' })

🥵 針對模板、頁面 + 頁面元資料的 HMR

我們現在為 Nuxt 的虛擬檔案(如路由、外掛程式、產生檔案)以及頁面元資料的內容(在 definePageMeta 巨集內)實作了熱模組重載(#30113)。

這應表示您在開發中將有更快速的體驗,並且在變更路由時無需重新載入頁面。

📋 頁面元資料增強功能

我們現在支援透過 experimental.extraPageMetaExtractionKeys 提取額外的頁面元資料鍵(可能由模組作者使用)(#30015)。這使模組作者能夠在建置時,在 pages:resolved hook 中使用此資訊。

我們現在也支援在 definePageMeta 中使用本機函式(#30241)。這表示您可以執行如下操作

function validateIdParam(route) {
  return !!(route.params.id && !isNaN(Number(route.params.id)))
}

definePageMeta({
  validate: validateIdParam,
})

🔥 效能改進

如果將在水合應用程式時使用應用程式資訊清單,我們現在會在瀏覽器中預先載入它(#30017)。

如果可以,我們也會從您的 bundle 中 tree shake vue-router 的 hash 模式歷史記錄 - 特別是如果您沒有自訂您的 app/router.options.ts#30297)。

🐣 v4 更新

v4 新預設值推出了一些變更,包括預設僅針對 Vue 元件內聯樣式(#30305)。

✅ 升級

與往常一樣,我們升級的建議是執行

npx nuxi@latest upgrade --force

這也將刷新您的 lockfile,並確保您從 Nuxt 依賴的其他相依性(尤其是在 unjs 生態系統中)中提取更新。

完整發布說明

閱讀 Nuxt v3.15.0 的完整發布說明。

衷心感謝參與此版本發布的每個人。❤️

如果您有任何意見或問題,請隨時告訴我們!🙏