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 处理有效负载的方式（在一个实验性标志下）。有效负载用于在进行服务器端渲染时将数据从服务器发送到客户端，并避免在水合阶段进行双重数据获取。

nuxt.config.ts

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

启用此新选项后，现在意味着开箱即用地支持各种富 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 文件中设置 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 改进

🧸 更好的上下文转换

♻️ 生态系统更新

🚨 “破坏性修复”

✅ 升级