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。长期以来，Nuxt 一直使用我们自己 devalue 的分支，原因是序列化 Errors 和其他非 POJO 对象时存在问题，但我们现在已过渡回原始版本。

您甚至可以使用新的对象语法 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 应用程序生命周期的后期运行。如果您预见到或在项目中遇到问题，请随时提出问题。

🎁 对象语法 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 即可启用 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 集成的错误，我们现在生成一个稍微不同的路径匹配语法。如果您依赖于生成的精确路径，请查看 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 改进

🧸 更好的上下文转换

♻️ 生态系统更新

🚨 “破坏性修复”

✅ 升级