Nuxt 3.10

v3.10 緊隨 v3.9 釋出，但它包含了大量功能和修復。以下是一些亮點。

✨ 預渲染時實驗性共享 asyncData

當預渲染路由時，我們可能會反覆重新獲取相同的資料。在 Nuxt 2 中，可以建立一個“payload”，它可以在獲取一次後在每個頁面中訪問（這當然可以在 Nuxt 3 中手動完成——請參閱這篇文章).

現在，藉助#24894我們可以在預渲染您的網站時自動為您完成此操作。您的 useAsyncData 和 useFetch 呼叫將在您網站的多次渲染之間進行去重和快取。

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

🆔 SSR 安全可訪問的唯一 ID 建立

我們現在提供了一個 useId 可組合函式，用於生成 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 鉤子允許模組作者執行諸如新增自定義 scrollBehavior 或在執行時增強路由等操作。

客戶端 Node.js 支援

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

這意味著，在您的客戶端程式碼中，您可以直接從 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).

這還附帶了一個新的可組合函式 refreshCookie，它允許手動重新整理 Cookie 值，例如在執行請求之後。

🏥 檢測反模式

在此版本中，我們還發布了一系列功能來檢測潛在的 bug 和效能問題。

• 現在，如果在伺服器上使用 setInterval，我們將丟擲錯誤 (#25259).
• 如果資料獲取可組合函式使用不當，我們會發出警告（僅在開發模式下）(#25071)，例如在外掛或 setup 上下文之外使用。
• 如果未使用 <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，Nuxt 將不會應用檢視過渡 (#22292)。您可以設定 viewTransition: 'always'；然後由您來尊重使用者的偏好。

🏗️ 構建時路由元資料

現在可以在構建時訪問在 definePageMeta 中定義的路由元資料，允許模組和鉤子修改這些值 (#25210).

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

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

📦 打包器模組解析

現在，藉助#24837我們現在選擇啟用 TypeScript bundler 解析，這應該更接近我們解析 Nuxt 專案中模組子路徑匯入的實際方式。

“打包器”模組解析是Vue 推薦的等等Vite 推薦的，但遺憾的是，仍然有許多包在它們的 package.json 中沒有正確的條目。

為此，我們在生態系統中開放了 85 個 PR 來測試切換預設設定，並識別和修復了一些問題。

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

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

✅ 升級

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

npx nuxi upgrade --force

這也將重新整理你的 lockfile，並確保你拉取 Nuxt 依賴的其他依賴項（尤其是在 unjs 生態系統中）的更新。

完整發布說明

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

祝您 Nuxting 愉快 ✨