釋出· 2023 年 4 月 11 日

Nuxt 3.4

Nuxt 3.4.0 是 Nuxt 3 的最新版本，帶來了一些令人興奮的新功能，包括支援 View Transitions API，將豐富的 JavaScript 有效負載從伺服器傳輸到客戶端——以及更多功能。

Daniel Roe

@danielroe.dev

🪄 支援 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.config.ts

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

我們已經合併了 Nuxt 處理有效負載方式的重大更改（在實驗性標誌下）。有效負載用於在進行伺服器端渲染時將資料從伺服器傳送到客戶端，並避免在水合階段重複獲取資料。

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

這一切都歸功於Rich-Harris/devalue#58。長期以來，Nuxt 一直使用我們自己的 devalue 分支，因為它在序列化錯誤和其他非 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.ts 檔案中設定 devtools: true 即可啟用 DevTools。

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 整合的一個 bug，我們現在生成了一個略有不同的路徑匹配語法。如果您依賴於生成的精確路徑，請檢視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 釋放開發體驗，比以往任何時候都更好地瞭解您的應用程式。

Nuxt 3.4

🪄 支援 View Transitions API

中的已知問題。

🎁 物件語法 Nuxt 外掛

🛠️ 更輕鬆的 Devtools 配置

📚 層改進

🧸 更好的上下文轉換

♻️ 生態系統更新

🚨 “破壞性修復”

✅ 升級