发布· 2023年4月11日

Nuxt 3.4

Nuxt 3.4.0 是 Nuxt 3 的最新版本，带来了令人兴奋的新功能，包括对 View Transitions API 的支持、将丰富的 JavaScript 负载（Payload）从服务端传输到客户端——以及更多内容。

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

中的已知问题。

✨ 负载（Payload）增强

nuxt.config.ts

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

我们合并了一项关于 Nuxt 如何处理负载的重大变更（处于实验性标志下）。在进行服务端渲染（SSR）时，负载用于将数据从服务器发送到客户端，并避免在注水（Hydration）阶段进行二次数据获取。

启用此新选项后，这意味着现已开箱即用地支持各种丰富的 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 应用的负载，即存储在 useState 中、从 useAsyncData 返回或通过 nuxtApp.payload 手动注入的数据。它不会影响通过 $fetch 或 useFetch 从 Nitro 服务端路由获取的数据，尽管这是我非常希望进一步探索的一个领域。

初步测试显示速度有显著提升：对于一个带有大量 JSON 负载的极简应用，服务端总响应时间快了 25%，但我建议您运行自己的测试并与我们分享结果。

如前所述，我们以标志的形式合并了此功能，以便我们可以广泛测试并收集对新方法的反馈。最重大的潜在变化是负载现在不再能立即在 window.__NUXT__ 上访问。相反，我们现在需要初始化 Nuxt 应用来解析负载，因此任何访问 __NUXT__ 的代码都需要在插件中或在 Nuxt 应用生命周期的后期运行。如果您预见到或在项目中遇到问题，请随时提出 issue。

🎁 对象语法 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 即可启用。

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

这也将刷新你的 lockfile，并确保你拉取 Nuxt 依赖的其他依赖项（尤其是在 unjs 生态系统中）的更新。

← 返回博客

Nuxt 3.5

Nuxt 3.5.0 发布，带来了 Vue 3.3、新默认配置、交互式服务端组件、类型化页面、环境配置——以及更多内容。

Nuxt DevTools 介绍

利用 Nuxt 释放开发者体验，并以前所未有的方式深入了解您的应用。

Nuxt 3.4

🪄 支持 View Transitions API

中的已知问题。

🎁 对象语法 Nuxt 插件

🛠️ 更简单的 Devtools 配置

📚 Layers 改进

🧸 更好的上下文转换

♻️ 生态系统更新

🚨 “破坏性修复”

✅ 升级