Nuxt3 中文课程《实战全栈开发简书》限时优惠
Release·  

Nuxt 3.13 发布

Nuxt 3.13 发布了!我们正在将一些为 Nuxt 4 构建的新功能移植回来!

🏘️ 路由组

我们现在支持使用括号/中括号命名目录,以便组织路由而不影响路径。

例如:

Directory structure
-| pages/
---| index.vue
---| (marketing)/
-----| about.vue
-----| contact.vue

这将生成 //about/contact 页面。marketing 组在 URL 结构中会被忽略。

原始 PR中阅读更多内容。

🏝️ 岛屿和 Head 元数据

现在可以让服务器组件岛屿操纵 head,例如在渲染时添加 SEO 元数据。

#27987中阅读更多内容。

🪝 自定义预加载触发器

我们现在支持为 NuxtLink 设置自定义预加载触发器 (#27846)。

例如:

pages/index.vue
<template>
  <div>
    <NuxtLink prefetch-on="interaction">
      这个链接将在悬停或获取焦点时预加载
    </NuxtLink>
    <!-- 注意,你可能不希望同时启用这两个选项! -->
    <NuxtLink :prefetch-on="{ visibility: true, interaction: true }">
      这个链接将在悬停/聚焦时或变为可见时预加载
    </NuxtLink>
  </div>
</template>

还可以为整个应用全局启用/禁用这些功能,并按链接进行覆盖。

例如:

nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        prefetch: true,
        prefetchOn: { visibility: false, interaction: true }
      }
    }
  }
})

🗺️ 更好的服务器源地图

当使用 node --enable-source-maps 运行时,您可能已经注意到,服务器构建中 Vue 文件的源地图指向的是 Vite 构建输出(例如 .nuxt/dist/server/_nuxt/index-O15BBwZ3.js)。

现在,即使在 Nitro 构建之后,您的服务器源地图也会引用您的原始源文件 (#28521)。

请注意,如果您不使用源地图,最简单的提高构建性能的方法之一就是关闭源地图,您可以在 nuxt.config 中轻松完成此操作:

nuxt.config.ts
export default defineNuxtConfig({
  sourcemap: {
    server: false,
    client: true,
  },
})

🎁 为模块作者提供的新功能

在 Nuxt v4 发布之前,我们正在为模块作者添加一些关键功能,包括在需要时使用新的 isNuxtMajorVersion 实用程序 (#27579) 以及使用新的 defineNuxtModule().with() 方法更好地推断合并模块选项的类型 (#27520)。

✨ 改进的开发警告

我们不再在中间件中使用数据获取组合时发出警告 (#28604),并在用户组件名称以 Lazy 开头时发出警告 (#27838)。

🚨 Vue TypeScript 变更

在 Vue 生态系统中,我们已经有一段时间在扩展 @vue/runtime-core 以向 vue 添加自定义属性和更多内容。然而,这无意中破坏了扩展 vue 的项目的类型 —— 现在这是官方推荐并记录的扩展这些接口的方式(例如,ComponentCustomPropertiesGlobalComponents其他)。

这意味着 所有 库都必须更新其代码(否则它会破坏扩展 vue 的库的类型)。

我们已经沿这些方向更新了 Nuxt 中的类型,但当您将最新的 vue-router 与尚未更新的库一起使用时,您可能会遇到问题。

请创建一个带有重现问题的 Issue —— 我很乐意帮助在相关上游库中创建 PR 来解决问题。或者,您可以通过在项目根目录中创建一个 declarations.d.ts 文件并使用以下代码来解决问题(感谢 @BobbieGoede贡献):

declarations.d.ts
import type {
  ComponentCustomOptions as _ComponentCustomOptions,
  ComponentCustomProperties as _ComponentCustomProperties,
} from 'vue';

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties extends _ComponentCustomProperties {}
  interface ComponentCustomOptions extends _ComponentCustomOptions {}
}

✅ 升级

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

npx nuxi@latest upgrade --force

这也会刷新您的锁定文件,并确保您拉取 Nuxt 依赖的其他依赖项的更新,特别是在 unjs 生态系统中。

完整发行说明

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

非常感谢每一位参与此次发布的人 —— 你们是 Nuxt 得以实现的关键。❤️

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