通过 100+ 条技巧学习 Nuxt!
发布·  

Nuxt 3.15

Nuxt 3.15 发布 - 包含 Vite 6,更好的 HMR 和更快的性能

我们正在继续开发 Nitro v3、Nuxt v4 及更多内容。但我们很高兴在圣诞节前(刚好)发布 Nuxt v3.15。

❄️ 下雪啦!

节日快乐!您在启动 Nuxt 时会注意到(如果您在北半球)加载屏幕上有一些雪花(#29871)。

⚡️ 包含 Vite 6

Nuxt v3.15 首次包含 Vite 6。虽然这是一个主要版本,但我们预计这对 Nuxt 用户来说不会是一个破坏性更改(请参阅完整的迁移指南)。但是,如果您的依赖项依赖于特定的 Vite 版本,请注意。

Vite 6 最重要的更改之一是新的 Environment API,我们希望将其与 Nitro 结合使用以改进服务器开发环境。敬请期待!

您可以在 Vite 6 更新日志中阅读完整的更改列表。

🪵 Chromium 开发工具改进

我们经常谈论 Nuxt DevTools,但 v3.15 在开发模式下为基于 Chromium 的浏览器开发工具提供了更好的集成。

我们现在使用 Chrome DevTools 可扩展性 API 来添加对在浏览器开发工具性能面板中打印 nuxt hook 时序的支持。

CleanShot 2024-11-14 at 15 05 22@2x

🗺️ callOnce 的导航模式

callOnce 是一个内置的 Nuxt composable,用于仅运行一次代码。例如,如果代码在服务器上运行,则不会在客户端再次运行。但有时您确实希望代码在*每次导航*时都运行 - 只是避免初始服务器/客户端双重加载。为此,有一个新的 mode: 'navigation' 选项,该选项将使代码仅在*每次导航*时运行一次。(有关更多信息,请参见 #30260。)

await callOnce(() => counter.value++, { mode: 'navigation' })

🥵 模板、页面 + 页面元数据的 HMR

我们现在为 Nuxt 的虚拟文件(如路由、插件、生成的文件)以及页面元数据的内容(在 definePageMeta 宏中)实现热模块重载(#30113)。

这意味着您在开发中应该有更快的体验,并且在更改路由时无需重新加载页面。

📋 页面元数据增强

我们现在支持通过 experimental.extraPageMetaExtractionKeys#30015)提取额外的页面元数据键(可能由模块作者使用)。这使模块作者可以在构建时在 pages:resolved hook 中使用此信息。

我们现在还支持 definePageMeta 中的局部函数(#30241)。这意味着您可以执行类似这样的操作

function validateIdParam(route) {
  return !!(route.params.id && !isNaN(Number(route.params.id)))
}

definePageMeta({
  validate: validateIdParam,
})

🔥 性能改进

如果在水合应用程序时将使用应用程序清单,我们现在将在浏览器中预加载该清单(#30017)。

如果我们可以,我们还会从您的捆绑包中删除 vue-router 的哈希模式历史记录 - 特别是,如果您没有自定义 app/router.options.ts#30297)。

🐣 v4 更新

为 v4 的新默认值提供了一些更改,包括默认仅内联 Vue 组件的样式(#30305)。

✅ 升级

与往常一样,我们建议升级的方式是运行

npx nuxi@latest upgrade --force

这也会刷新您的 lockfile,并确保您从 Nuxt 依赖的其他依赖项(尤其是在 unjs 生态系统中)中提取更新。

完整发行说明

阅读 Nuxt v3.15.0 的完整发行说明。

非常感谢参与此版本的所有人。❤️

如果您有任何反馈或问题,请随时告诉我们!🙏