发布·  

Nuxt 3.13

Nuxt 3.13 发布了 - 我们正在将一些为 Nuxt 4 构建的新特性迁移回来!

🏘️ 路由分组

我们现在支持使用括号/方括号命名目录,以整理您的路由,而不影响路径。

例如:

目录结构
-| pages/
---| index.vue
---| (marketing)/
-----| about.vue
-----| contact.vue

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

阅读更多内容请查看 原始 PR

🏝️ 岛屿与头部元数据

现在,服务器组件岛屿可以操作头部,例如在渲染时添加 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 文件,使用以下代码来解决问题 (credit@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 成为可能的关键。 ❤️

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