Nuxt 3.4

🪄 View Transitions API 支援

您可以在 https://nuxt-view-transitions.surge.sh 上查看示範，並在 StackBlitz 上查看原始碼。

您可能已經注意到，基於 Chromium 的瀏覽器現在推出了一個新的 Web 平台 API：View Transitions API。這是一個令人興奮的新原生瀏覽器過渡功能，它（在其他功能中）能夠在不同頁面上不相關的元素之間進行過渡。

Nuxt 現在提供了一個實驗性實作，將在 v3.4 發布週期中積極開發。請參閱連結的 PR 中的已知問題。

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

✨ Payload 增強功能

我們合併了一個針對 Nuxt 處理 payload 方式的重大變更（在實驗性標誌下）。Payload 用於在進行伺服器端渲染時將資料從伺服器傳送到客戶端，並避免在 hydration 階段進行雙重資料獲取。

nuxt.config.ts

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

啟用此新選項後，現在表示開箱即用支援各種豐富的 JS 類型：正規表示式、日期、Map 和 Set 以及 BigInt，以及 NuxtError - 和 Vue 特定的物件，例如 ref、reactive、shallowRef 和 shallowReactive。

您可以在我們的測試套件中找到範例。

這一切都歸功於 Rich-Harris/devalue#58。長期以來，由於序列化 Errors 和其他非 POJO 物件的問題，Nuxt 一直使用我們自己的 devalue 分支，但我們現在已轉回原始版本。

您甚至可以使用新的物件語法 Nuxt 外掛程式註冊您自己的自訂類型

plugins/custom-payload-type.ts

export default definePayloadPlugin(() => {
  definePayloadReducer('BlinkingText', data => data === '<original-blink>' && '_')
  definePayloadReviver('BlinkingText', () => '<revivified-blink>')
})

您可以在這裡閱讀更多關於其運作方式的資訊。

注意：這僅影響 Nuxt 應用程式的 payload，也就是儲存在 useState 中的資料、從 useAsyncData 返回的資料或透過 nuxtApp.payload 手動注入的資料。它不影響透過 $fetch 或 useFetch 從 Nitro 伺服器路由獲取的資料，儘管這是我很想進一步探索的領域。

初步測試顯示速度顯著提升：對於具有大型 JSON payload 的極簡應用程式，伺服器總回應時間加快了 25%，但我建議您運行自己的測試並與我們分享結果。

如前所述，我們將其合併在一個標誌後，以便我們可以廣泛測試並收集有關新方法的意見回饋。最重大的潛在變更是 payload 現在不再立即在 window.__NUXT__ 上可用。相反，我們現在需要初始化 Nuxt 應用程式來解析 payload，因此任何存取 __NUXT__ 的程式碼都需要在外掛程式中或在 Nuxt 應用程式生命週期的稍後階段運行。如果您預見或在專案中遇到問題，請隨時提出 issue。

🎁 物件語法 Nuxt 外掛程式

我們現在支援物件語法 Nuxt 外掛程式，以便更好地控制外掛程式順序和更輕鬆地註冊 hooks。

plugins/my-plugin.ts

export default defineNuxtPlugin({
  name: 'my-plugin',
  enforce: 'pre', // or 'post'
  async setup (nuxtApp) {
    // this is the equivalent of a normal functional plugin
  },
  hooks: {
    // You can directly register Nuxt app hooks here
    'app:created'() {
      const nuxtApp = useNuxtApp()
      //
    }
  }
})

未來，我們計劃根據您在外掛程式中傳遞的 metadata 來啟用建置最佳化。

🛠️ 更輕鬆的 Devtools 設定

在您的專案中啟用 Nuxt DevTools 變得更加容易：只需在您的 nuxt.config 檔案中設定 devtools: true 即可啟用 devtools。

nuxt.config.ts

export default defineNuxtConfig({
  devtools: true
})

如果尚未安裝，Nuxt 將提示在本地安裝它。這表示您不再需要全域啟用 Nuxt DevTools。

注意：DevTools 仍處於實驗階段且正在積極開發中，因此請為偶爾出現的意外行為做好準備，並請直接向 https://github.com/nuxt/devtools 回報問題 🙏

以前可以傳遞 x-nuxt-no-ssr header（未記錄）以強制 SPA 渲染。我們現在預設停用了此行為，但您可以透過將 experimental.respectNoSSRHeader 設定為 true 來恢復它。或者，您可以在伺服器上設定 event.context.nuxt.noSSR 以強制 SPA 渲染。
我們移除了（已棄用的）#head 別名，並且也預設停用了 @vueuse/head 行為的 polyfill。（仍然可以使用 experimental.polyfillVueUseHead 啟用它。）
我們移除了（已棄用的）experimental.viteNode 選項。它可以改用 vite.devBundler 進行設定。
我們棄用了在沒有 public key 的情況下存取 public runtime config 的做法。這是與 Nuxt 2 的未記錄相容性措施，我們計劃在 v3.5 中完全移除它。
為了修復 vue-router 整合中的錯誤，我們現在產生稍微不同的路徑匹配語法。如果您依賴於產生的確切路徑，請查看 https://github.com/nuxt/nuxt/pull/19902 以取得更多資訊。

✅ 升級

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

npx nuxi upgrade --force

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

← 返回部落格

Nuxt 3.5

Nuxt 3.5.0 已發布，帶來 Vue 3.3、新的預設值、互動式伺服器組件、類型化頁面、環境設定以及更多功能。

Nuxt DevTools 介紹

透過 Nuxt 釋放開發人員體驗，並以前所未有的方式了解您的應用程式。

🪄 View Transitions API 支援

✨ Payload 增強功能

🎁 物件語法 Nuxt 外掛程式

🛠️ 更輕鬆的 Devtools 設定

📚 Layers 改善

🧸 更好的 Context 轉換

♻️ 生態系統更新

🚨 「破壞性修復」

✅ 升級