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

Nuxt 3.12

Nuxt 3.12 已發布 - 充滿改進,並為 Nuxt 4 做好準備!

我們正朝著 Nuxt 4 的發布邁進,但我們在 Nuxt v3.12 中也沒有保留。

🚀 測試 Nuxt 4 的變更

Nuxt 4 即將到來,現在可以透過在您的 nuxt.config 檔案中設定選項,來測試下一個主要版本(#26925)中即將發生的行為變更

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
})

當我們合併 Nuxt 4 的 PR 時,我們一直在此標誌後啟用它們。我們盡可能地以向後相容性為目標 - 我們的測試矩陣在 v3 和 v4 相容模式下運行相同的測試。

這裡有很多要說的,有 10 多個不同的 PR 和行為變更被記錄和可測試,但如需完整詳細資訊,包括遷移步驟,請參閱v4 升級文件

我們非常感謝您儘早測試 Nuxt 4 中即將推出的功能! 🙏

📜 Nuxt Scripts 自動安裝

我們一直在逐步發布 Nuxt Scripts。它目前處於公開預覽階段,但我們即將公開發布,因此我們為 composables 新增了一些存根,這些存根(使用時)將提示安裝 @nuxt/scripts 模組。

👉 請注意發布 - 以及一篇更詳細說明的文章!

🌈 Layer 自動註冊和錯誤修復

就像 ~/modules 一樣,專案中 ~/layers 目錄中的任何 layers 現在都會自動註冊為專案中的 layers (#27221)。

我們現在也正確載入 layer 依賴項,這應該可以解決 monorepos 和 git 安裝的一系列問題 (#27338)。

🌐 內建的無障礙功能改進

我們現在有一個內建的 <NuxtRouteAnnouncer> 元件和對應的 useRouteAnnouncer composable,預設情況下,它們將新增到未來的新 Nuxt 模板中。

如需完整詳細資訊,請參閱 原始 PR (#25741)文件

我們將繼續開發 nuxt/a11y - 期待在未來聽到更多相關資訊!

🔥 效能改進

我們也進行了一些效能改進,其中許多改進都在 compatibilityVersion: 4 標誌之後,例如不再使用深度反應式的 asyncData 載荷。

重大改進包括重複資料刪除模組 (#27475) - 這主要適用於在其 layers 中指定模組的 layer 使用者。在一個專案中,我們看到 Nuxt 啟動時間縮短了 30 秒以上。

我們還透過從預先捆綁中排除常見的 ESM 依賴項,縮短了 Vite 開發伺服器的啟動時間,並建議模組作者考慮也這樣做 (#27372)。

我們改進了 chunk 確定性,因此連續建置不太可能具有完全不同的 chunk hash (#27258)。

我們從伺服器建置中 tree shake 掉更多僅限用戶端的 composables (#27044),並減少了伺服器元件載荷的大小 (#26863)。

👨‍👩‍👧‍👦 多應用程式支援

我們進行了一些變更,使我們更接近在 Nuxt 中原生支援多應用程式的位置,包括 multiApp 實驗性標誌 (#27291) 以及在執行時並行運行多個 Nuxt 應用程式執行個體的能力 (#27068)。

雖然尚未準備就緒,但請務必關注 tracker issue,如果您對此感興趣,請隨時參與。

⛑️ DX 勝利

我們現在在開發伺服器日誌中序列化更多內容,包括 VNodes (#27309) 和 URLs。我們還解決了一個可能導致開發伺服器凍結的錯誤。

當在瀏覽器中存取私有運行時配置時,我們現在會透過更豐富的錯誤訊息通知您 (#26441)。

🪨 穩定功能

我們移除了一些已穩定下來的實驗性選項,我們認為這些選項不再需要可配置

  • experimental.treeshakeClientOnly (自 v3.0.0 起預設啟用)
  • experimental.configSchema (自 v3.3.0 起預設啟用)
  • experimental.polyfillVueUseHead (自 v3.4.0 起停用) - 可在使用者端透過 plugin 實作
  • experimental.respectNoSSRHeader (自 v3.4.0 起停用) - 可在使用者端透過 server middleware 實作

我們也預設啟用了 scanPageMeta (#27134)。這會提取 definePageMeta 巨集中的任何頁面中繼資料,並使其可供模組(如 @nuxtjs/i18n)使用,以便它們可以擴充它。

這解鎖了更好的模組/類型化路由整合,但具有潛在的效能成本 - 因此,如果您遇到任何問題,請提交 issue。

💪 類型改進

我們現在支援伺服器元件中類型化的 #fallback 插槽 (#27097)。

我們還改進了您產生的 tsconfig.json 中的一些預設值,包括如果您安裝了本機 TypeScript v5.4 版本,則設定 module: 'preserve' (請參閱文件) - 請參閱 #26667#27485

📦 模組作者/進階使用者改進

我們為模組作者提供了一系列類型改進,包括

  • installModule 中支援類型化的模組選項 (#26744)
  • 在模組選項中指定與特定建置器 (vite/webpack) 的相容性的選項 (#27022)
  • 一個新的 onPrehydrate hook,用於掛鉤到瀏覽器 hydration 週期 (#27037)
  • 能夠在模組中存取和更新已解析的運行時配置,並具有新的建置時 useRuntimeConfigupdateRuntimeConfig 工具程式 (#27117)

🎨 內嵌 UI 模板

如果您之前使用過 @nuxt/ui-templates,那麼您可能需要知道我們已將它們從 一個單獨的儲存庫 移至 nuxt/nuxt monorepo。(這純粹是一個重構,而不是變更,儘管您可以期待 Nuxt v4 的一些新設計。)

✅ 升級

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

npx nuxi@latest upgrade --force

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

完整發行說明

閱讀 Nuxt v3.12.0 的完整發行說明。

非常感謝 75 位以上的 Nuxt 貢獻者和社群成員參與了此版本。❤️

最後,感謝您閱讀到這裡!我們希望您喜歡 v3.12,如果您有任何意見或問題,請告訴我們。🙏

Nuxting 愉快 ✨