Release· April 11, 2023

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 如何处理负载的重大更改**（在实验性标志下）。负载用于在服务器端渲染时从服务器向客户端发送数据，并在混合阶段避免重复数据获取。

nuxt.config.ts

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

启用这个新选项后，现在意味着各种丰富的 JavaScript 类型被支持：正则表达式、日期、Map 和 Set，BigInt，以及 NuxtError - 以及 Vue 特定的对象，如 ref、reactive、shallowRef 和 shallowReactive。

在我们的测试套件中可以找到一个示例。

这得益于 Rich-Harris/devalue#58。很长一段时间以来，Nuxt 一直在使用我们自己的 devalue 分支，由于无法序列化 Errors 和其他非 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', // 或 'post'
  async setup (nuxtApp) {
    // 这相当于一个正常的函数插件
  },
  hooks: {
    // 你可以直接在这里注册 Nuxt 应用程序的钩子
    '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

这将刷新你的锁定文件，并确保你获取了 Nuxt 依赖的其他依赖项的更新，尤其是在 unjs 生态系统中。

← 返回博客

Nuxt 3.5

Nuxt 3.5.0 已发布，带来了 Vue 3.3、新的默认设置、交互式服务器组件、带类型的页面、环境配置等等功能。

介绍 Nuxt DevTools

通过 Nuxt 解放开发者体验，比以往更好地了解您的应用程序。

Nuxt 3.4

🪄 View Transitions API 支持

✨ 负载增强

🎁 对象语法的 Nuxt 插件

🛠️ 更轻松的 Devtools 配置

📚 层级改进

🧸 更好的上下文转换

♻️ 生态系统更新

🚨 '破坏性的修复'

✅ 升级