透過 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 兼容模式下運行相同的 fixture。

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

我們非常感謝您盡早測試 Nuxt 4 中即將推出的內容! 🙏

📜 Nuxt Scripts 自動安裝

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

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

🌈 Layer 自動註冊和錯誤修復

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

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

🌐 內建的易用性改進

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

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

我們正在繼續開發 nuxt/a11y - 請期待未來有更多相關資訊!

🔥 效能改進

我們也進行了一些效能改進,其中許多改進都在 compatibilityVersion: 4 標誌之後,例如從深度響應式 asyncData 酬載轉移。

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

我們也透過排除預先綁定中的常見 ESM 相依性來改善 Vite 開發伺服器啟動時間,並建議模組作者考慮執行相同的操作 (#27372)。

我們改進了 chunk 的決定性,因此循序建置不太可能具有完全不同的 chunk 雜湊 (#27258)。

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

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

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

雖然尚未準備好,但如果這對您來說很有趣,請隨時關注追蹤問題並隨時加入。

⛑️ DX 的勝利

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

當在瀏覽器中存取私人執行階段設定時,我們現在會以更具資訊性的錯誤訊息通知您 (#26441)。

🪨 穩定功能

我們已移除一些已穩定且我們認為不再需要設定的實驗性選項

  • experimental.treeshakeClientOnly (自 v3.0.0 起預設啟用)
  • experimental.configSchema (自 v3.3.0 起預設啟用)
  • experimental.polyfillVueUseHead (自 v3.4.0 起停用) - 可透過 plugin 在使用者端實作
  • experimental.respectNoSSRHeader (自 v3.4.0 起停用) - 可透過 伺服器中介軟體 在使用者端實作

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

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

💪 類型改進

我們現在支援伺服器元件中類型化的 #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

這也會刷新您的鎖定檔案,並確保您提取 Nuxt 所依賴的其他相依性的更新,尤其是在 unjs 生態系統中。

完整發佈說明

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

非常感謝 75 位以上的 Nuxt 貢獻者和社群成員參與這次發佈。❤️

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

Nuxting 快樂 ✨