透過超過 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 最重大的變更之一是新的環境 API,我們希望將其與 Nitro 結合使用,以改進伺服器開發環境。敬請期待!

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

🪵 Chromium 開發者工具的改進

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

我們現在使用 Chrome 開發者工具擴充性 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)。

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

🐣 v4 更新

為 v4 的新預設值發佈了一些變更,包括預設只內嵌 Vue 元件的樣式(#30305)。

✅ 升級

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

npx nuxi@latest upgrade --force

這也會重新整理您的鎖定檔,並確保您從 Nuxt 依賴的其他依賴項(尤其是在 unjs 生態系統中)提取更新。

完整發佈說明

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

非常感謝參與此版本的所有人。❤️

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