Nuxt 3.10

v3.10 緊隨 v3.9 之後發佈，但它包含許多功能和修復。以下是一些重點。

✨ 實驗性共享 asyncData，用於預渲染

當預渲染路由時，我們可能會不斷重複獲取相同的資料。在 Nuxt 2 中，可以建立一個 'payload'，它只需獲取一次，然後就可以在每個頁面中存取（當然，這在 Nuxt 3 中也可以手動完成 - 請參閱 這篇文章）。

透過 #24894，我們現在能夠在預渲染您的網站時自動為您完成此操作。您的 useAsyncData 和 useFetch 呼叫將在您網站的渲染之間進行重複資料刪除和快取。

export defineNuxtConfig({
  experimental: {
    sharedPrerenderData: true
  }
})

🆔 SSR 安全且可存取的唯一 ID 建立

我們現在提供 useId composable 以生成 SSR 安全的唯一 ID (#23368)。這允許在您的應用程式中建立更易於存取的介面。例如

<script setup>
const emailId = useId()
const passwordId = useId()
</script>

<template>
  <form>
    <label :for="emailId">Email</label>
    <input
      :id="emailId"
      name="email"
      type="email"
    >
    <label :for="passwordId">Password</label>
    <input
      :id="passwordId"
      name="password"
      type="password"
    >
  </form>
</template>

✍️ 擴展 app/router.options

現在模組作者可以注入他們自己的 router.options 檔案 (#24922)。新的 pages:routerOptions hook 允許模組作者執行諸如新增自訂 scrollBehavior 或新增路由的運行時擴充等操作。

客戶端 Node.js 支援

我們現在支援（實驗性地）polyfill 關鍵的 Node.js 內建功能 (#25028)，就像我們在部署到非 Node 環境時已經透過 Nitro 在伺服器端做的那樣。

這意味著，在您的客戶端程式碼中，您可以直接從 Node 內建功能導入（支援 node: 和 node 導入）。但是，為了避免不必要地增加您的 bundle 大小，我們不會為您全域注入任何內容。您可以根據需要導入它們。

import { Buffer } from 'node:buffer'
import process from 'node:process'

或者提供您自己的 polyfill，例如，在 Nuxt 外掛程式內。

import { Buffer } from 'node:buffer'
import process from 'node:process'

globalThis.Buffer = Buffer
globalThis.process = process

export default defineNuxtPlugin({})

這應該可以讓使用不支援瀏覽器的函式庫的使用者更輕鬆。但是，由於不必要地增加您的 bundle 存在風險，我們強烈建議使用者盡可能選擇其他替代方案。

🍪 更好的 Cookie 反應性

我們現在允許您選擇使用 CookieStore。如果瀏覽器支援存在，則將使用它來代替 BroadcastChannel，以便在 Cookie 更新時反應式地更新 useCookie 值 (#25198)。

這也與一個新的 composable refreshCookie 配對，它允許手動刷新 Cookie 值，例如在執行請求之後。

🏥 偵測反模式

在此版本中，我們還發佈了一系列功能，用於偵測潛在的錯誤和效能問題。

• 如果 setInterval 在伺服器端使用，我們現在將拋出錯誤 (#25259)。
• 如果資料獲取 composable 使用不當 (#25071)，例如在外掛程式或設定上下文之外，我們會發出警告（僅在開發模式下）。
• 如果您沒有使用 <NuxtPage /> 但啟用了 vue-router 整合 (#25490)，我們會發出警告（僅在開發模式下）。（<RouterView /> 不應單獨使用。）

🧂 細緻的視圖過渡支援

現在可以使用 definePageMeta (#25264) 在每個頁面的基礎上控制視圖過渡支援。

您需要先啟用實驗性視圖過渡支援

export default defineNuxtConfig({
  experimental: {
    viewTransition: true
  },
  app: {
    // you can disable them globally if necessary (they are enabled by default)
    viewTransition: false
  }
})

並且您可以細緻地選擇加入/退出

<script setup lang="ts">
definePageMeta({
  viewTransition: false
})
</script>

最後，如果使用者的瀏覽器符合 prefers-reduced-motion: reduce (#22292)，Nuxt 將不會應用視圖過渡。您可以設定 viewTransition: 'always'；那麼尊重使用者的偏好將取決於您。

🏗️ 建置時路由元資料

現在可以在建置時存取在 definePageMeta 中定義的路由元資料，允許模組和 hook 修改和變更這些值 (#25210)。

export default defineNuxtConfig({
  experimental: {
    scanPageMeta: true
  }
})

請試驗此功能並告訴我們它如何為您工作。我們希望在未來的版本中改進效能並預設啟用此功能，以便像 @nuxtjs/i18n 等模組可以更深入地整合在 definePageMeta 中設定的路由選項。

📦 Bundler 模組解析

透過 #24837，我們現在選擇加入 TypeScript bundler 解析，這應該更接近我們在 Nuxt 專案中解析模組子路徑導入的實際方式。

'Bundler' 模組解析是 Vue 和 Vite 推薦的，但不幸的是，仍然有許多套件在其 package.json 中沒有正確的條目。

作為其中的一部分，我們在整個生態系統中開啟了 85 個 PR，以測試切換預設值，並識別和修復了一些問題。

如果您需要關閉此行為，您可以這樣做。但是，請考慮在函式庫或模組的 repo 中提出問題（隨時標記我），以便可以在源頭解決它。

export default defineNuxtConfig({
  future: {
    typescriptBundlerResolution: false
  }
})

✅ 升級

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

npx nuxi upgrade --force

這也將刷新您的 lockfile，並確保您從 Nuxt 依賴的其他相依性（特別是在 unjs 生態系統中）中獲取更新。

完整發行說明

感謝您閱讀到這裡！我們希望您喜歡這個新版本。如果您有任何意見或問題，請隨時告訴我們。

Nuxting 愉快 ✨