Nuxt 3.9

所有參與此版本的 Nuxt 成員祝您和您的家人聖誕快樂！ 🎁🎄

我們在 v3.9 中加入了許多功能，迫不及待想讓您試用。

⚡️ Vite 5

此版本支援 Vite 5 和 Rollup 4。模組作者可能需要檢查以確保您建立的任何 Vite 外掛程式都與這些最新版本相容。

這帶來了許多很棒的改進和錯誤修復 - 請查看Vite 更新日誌以獲取更多資訊。

✨ Vue 3.4 就緒

此版本已使用最新的 Vue 3.4 候選版本進行測試，並具有必要的配置，可以利用 Vue 3.4 中的新功能，包括在生產環境中偵錯 hydration 錯誤（只需在您的 Nuxt 配置中設定 debug: true）。

👉 若要使用，只需在 v3.4 發布後更新您的 vue 版本，或立即試用候選版本

{
  "dependencies": {
    "nuxt": "3.9.0",
    "vue": "3.4.0-rc.1",
    "vue-router": "latest"
  }
}

🏝️ 互動式伺服器組件

這是一個高度實驗性的更新，但現在可以在 Nuxt 伺服器組件中玩轉互動式組件。您需要額外啟用此新功能才能使用組件島 (component islands)

export default defineNuxtConfig({
  experimental: {
    componentIslands: {
      selectiveClient: true
    }
  }
})

現在，在伺服器組件中，您可以使用 nuxt-client 指令指定要 hydration 的組件

<NuxtLink :to="/" nuxt-client />

我們對此感到非常興奮 - 請務必讓我們知道您如何使用它！ 🙏

🔥 自動伺服器優化

我們現在使用 Vite 新的 AST 感知 'define' 在伺服器端程式碼上執行更準確的替換，這表示像這樣的程式碼將不再拋出錯誤

<script setup lang="ts">
if (document) {
  console.log(document.querySelector('div'))
}
</script>

直到現在這才成為可能，因為我們不希望冒險意外地替換應用程式的非 JS 部分中的普通單字，例如 document。但 Vite 新的 define 功能由 esbuild 驅動，並且具有語法感知能力，因此我們對啟用此功能感到有信心。儘管如此，如果需要，您可以選擇退出

export default defineNuxtConfig({
  hooks: {
    'vite:extendConfig' (config) {
      delete config.define!.document
    }
  }
})

🚦 細緻的載入 API

我們現在有一個新的基於 hook 的系統，用於 <NuxtLoadingIndicator>，包括一個 useLoadingIndicator composable，可讓您控制/停止/啟動載入狀態。如果您願意，也可以 hook 到 page:loading:start 和 page:loading:end。

🏁 在 callOnce 中執行單個事件

有時您只想執行一次程式碼，無論您載入頁面多少次 - 而且如果您在伺服器上執行了程式碼，您不希望在用戶端再次執行它。

為此，我們有一個新的實用程式：callOnce (#24787)。

<script setup>
const websiteConfig = useState('config')

await callOnce(async () => {
  console.log('This will only be logged once')
  websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})
</script>

請注意，此實用程式具有上下文感知能力，因此它<強調>必須在組件 setup 函數或 Nuxt 外掛程式中呼叫，與其他 Nuxt composable 一樣。

🚨 錯誤類型

在一段時間內，useAsyncData 和 useFetch 返回的錯誤類型通常被泛型地鍵入為 Error。我們已顯著改進了它們的類型可能性，使其在您實際收到的內容方面更加準確。（我們在底層使用 h3 createError 實用程式標準化錯誤，因此它們可以從伺服器序列化到用戶端，例如。）

我們已嘗試以向後相容的方式實作類型變更，但您可能會注意到，如果您手動配置這些 composable 的泛型，則需要更新泛型。請參閱 (#24396) 以獲取更多資訊，如果您遇到任何問題，請務必告知我們。

🔥 Schema 效能

我們在此版本中花了一些時間進行一些小的效能改進，因此您應該會注意到有些事情變得更快了一些。這是一個正在進行中的專案，我們有一些關於改進 Nuxt 開發伺服器初始載入時間的想法。

✅ 升級

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

npx nuxi upgrade

完整發布說明

感謝您閱讀到這裡！我們希望您喜歡這個新版本。如果您有任何回饋或問題，請務必告知我們。

祝您 Nuxting 愉快 ✨