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
  }
})

✨ 酬載增強

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

nuxt.config.ts

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

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

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

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

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

plugins/custom-payload-type.ts

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

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

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

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

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

🎁 物件語法 Nuxt 外掛程式

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

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()
      //
    }
  }
})

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

🛠️ 更輕鬆的 Devtools 設定

在您的專案中啟用 Nuxt DevTools 甚至更容易：只需在您的 nuxt.config 檔案中設定 devtools: true 即可啟用開發工具。

nuxt.config.ts

export default defineNuxtConfig({
  devtools: true
})

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

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

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

✅ 升級

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

npx nuxi upgrade --force

這也會刷新您的鎖定檔，並確保您引入 Nuxt 依賴的其他相依性的更新，特別是在 unjs 生態系統中。

← 返回部落格

Nuxt 3.5

Nuxt 3.5.0 已發佈，帶來 Vue 3.3、新的預設值、互動式伺服器元件、類型化頁面、環境組態等等。

Nuxt DevTools 介紹

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

🪄 View Transitions API 支援

✨ 酬載增強

🎁 物件語法 Nuxt 外掛程式

🛠️ 更輕鬆的 Devtools 設定

📚 圖層改進

🧸 更好的上下文轉換

♻️ 生態系統更新

🚨 「重大修復」

✅ 升級