透過超過 100 個訣竅學習 Nuxt!
發佈·  

Nuxt 3.9

Nuxt 3.9 發佈了 - 這是 Nuxt 團隊送上的聖誕禮物,帶來了 Vite 5、互動式伺服器元件、新的 composable、新的載入 API 等等。

參與此版本的所有 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 composable,可讓您控制/停止/啟動載入狀態。如果您願意,也可以掛鉤到 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 composable 相同。

請在文件 > API > 工具 > 呼叫一次中閱讀更多資訊。

🚨 錯誤類型

一段時間以來,useAsyncDatauseFetch 傳回的錯誤類型都相當通用,為 Error。我們已顯著改進它們的類型可能性,使其在您實際收到的內容方面更加準確。(我們在底層使用 h3 createError 實用程式來正規化錯誤,因此它們可以從伺服器序列化到用戶端,例如。)

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

🔥 Schema 效能

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

✅ 升級

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

npx nuxi upgrade

完整發佈說明

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

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

Nuxting 愉快 ✨