Nuxt 3.4

🪄 视图过渡 API 支持

您可以在 https://nuxt-view-transitions.surge.sh 上查看演示，并在 StackBlitz 上查看源代码。

您可能已经注意到，基于 Chromium 的浏览器现在提供了一个新的 Web 平台 API：视图过渡 API。这是一个激动人心的新功能，可用于原生浏览器过渡，它（除其他功能外）能够在不同页面上的不相关元素之间进行过渡。

Nuxt 现在提供了一个实验性实现，它将在 v3.4 发布周期中得到积极开发。请参阅链接的 PR 中的已知问题。

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

✨ 数据负载增强

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

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 分支，因为在序列化错误和其他非 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 即可启用 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 行为的多填充。（它仍然可以通过 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 释放开发者体验，比以往任何时候都更好地了解您的应用程序。

🪄 视图过渡 API 支持

✨ 数据负载增强

🎁 对象语法 Nuxt 插件

🛠️ 更轻松的 Devtools 配置

📚 层级改进

🧸 更好的上下文转换

♻️ 生态系统更新

🚨 “修复破坏性问题”

✅ 升级