釋出·  

Nuxt 3.9

Nuxt 3.9 釋出了——這是 Nuxt 團隊送上的聖誕禮物,帶來了 Vite 5、互動式伺服器元件、新的可組合項、新的載入 API 等功能。
Daniel Roe

Daniel Roe

@danielroe.dev

參與此版本釋出的所有 Nuxt 團隊成員祝您和您的家人聖誕快樂!🎁🎄

v3.9 中包含了許多新功能,我們迫不及待地想讓您嘗試一下。

⚡️ Vite 5

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

這帶來了一系列重大改進和錯誤修復——請檢視Vite 變更日誌瞭解更多資訊。

✨ Vue 3.4 就緒

此版本已透過最新的 Vue 3.4 釋出候選版本測試,並具有必要的配置以利用Vue 3.4 中的新功能,包括在生產環境中除錯水合錯誤(只需在 Nuxt 配置中設定 debug: true)。

👉 要利用此功能,只需在 v3.4 釋出後更新您的 vue 版本,或立即試用釋出候選版本

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

🏝️ 互動式伺服器元件

這是一個高度實驗性的更新,但現在可以在 Nuxt 伺服器元件中試用互動式元件。您需要額外啟用此新功能以及元件島嶼

nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    componentIslands: {
      selectiveClient: true
    }
  }
})

現在,在伺服器元件中,您可以使用 nuxt-client 指令指定要水合的元件

components/SomeComponent.server.vue
<NuxtLink :to="/" nuxt-client />

我們對此非常興奮——所以請務必告訴我們您是如何使用它的!🙏

🔥 自動伺服器最佳化

我們現在使用 Vite 新的 AST 感知“define”來對伺服器端程式碼執行更精確的替換,這意味著像這樣的程式碼將不再丟擲錯誤

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

直到現在這都是不可能的,因為我們不想冒險意外替換應用程式非 JS 部分中的普通單詞,例如 document。但 Vite 的新 define 功能由 esbuild 提供支援,並且是語法感知的,所以我們有信心啟用此功能。儘管如此,如果需要,您可以選擇退出

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

🚦 精細載入 API

我們現在為 <NuxtLoadingIndicator> 提供了新的基於鉤子的系統,包括一個 useLoadingIndicator 可組合項,讓您可以控制/停止/開始載入狀態。如果您願意,您還可以鉤入 page:loading:startpage:loading:end

您可以在文件中和原始 PR 中(#24010).

🏁 在 callOnce 中執行單個事件

有時您只想執行一次程式碼,無論您載入頁面多少次——並且如果它在伺服器上執行過,您不想在客戶端上再次執行它。

為此,我們有一個新的實用工具:callOnce#24787).

app.vue
<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>

請注意,此實用工具是上下文感知的,因此它_必須_在元件設定函式或 Nuxt 外掛中呼叫,與其他 Nuxt 可組合項一樣。

文件 > API > 實用工具 > Call Once 中閱讀更多內容。

🚨 錯誤型別

一段時間以來,useAsyncDatauseFetch 返回的錯誤型別一直都是泛型 Error。我們顯著改進了它們的型別可能性,以使其在您實際收到的內容方面更加準確。(我們使用 h3 createError 實用工具在底層規範化錯誤,因此它們可以從伺服器序列化到客戶端,例如。)

我們嘗試以向後相容的方式實現型別更改,但您可能會注意到,如果您手動配置這些可組合項的泛型,則需要更新泛型。請參閱(#24396)瞭解更多資訊,如果遇到任何問題,請務必告訴我們。

🔥 模式效能

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

✅ 升級

像往常一樣,我們建議您執行以下命令進行升級

npx nuxi upgrade

完整發布說明

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

感謝你閱讀到這裡!我們希望你喜歡這個新版本。如果你有任何反饋或問題,請告訴我們。

祝您 Nuxting 愉快 ✨