发布·  

Nuxt 3.13

Nuxt 3.13 已发布 - 将我们为 Nuxt 4 构建的一些新功能移植回来!
Daniel Roe

Daniel Roe

@danielroe.dev

🏘️ 路由组

我们现在支持用括号命名目录来组织你的路由,而不会影响路径。

例如

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

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

阅读更多信息原始 PR.

🏝️ Islands 和 Head 元数据

现在服务器组件 Islands 可以在渲染时操作头部,例如添加 SEO 元数据。

阅读更多信息#27987.

🪝 自定义预取触发器

我们现在支持 NuxtLink 的自定义预取触发器(#27846).

例如

pages/index.vue
<template>
  <div>
    <NuxtLink prefetch-on="interaction">
      This will prefetch when hovered or when it gains focus
    </NuxtLink>
    <!-- note that you probably don't want both enabled! -->
    <NuxtLink :prefetch-on="{ visibility: true, interaction: true }">
      This will prefetch when hovered/focus - or when it becomes visible
    </NuxtLink>
  </div>
</template>

还可以为你的应用全局启用/禁用这些触发器,并为每个链接进行覆盖。

例如

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

🗺️ 更好的服务器 Source Map

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

现在,即使在 Nitro 构建之后,你的服务器 source map 也会引用你的原始源文件(#28521).

请注意,提高构建性能最简单的方法之一是,如果你不使用 source map,就将其关闭,你可以在 nuxt.config.ts 中轻松完成此操作

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 的项目的类型——而这现在是增强这些接口的官方推荐和文档化方式(例如,ComponentCustomProperties, GlobalComponents等等如此).

这意味着所有库都必须更新其代码(否则会破坏那些增强 vue 的库的类型)。

我们已根据这些原则更新了 Nuxt 中的类型,但与尚未更新的库一起使用时,你可能会遇到最新 vue-router 的问题。

请创建一个带有复现步骤的问题——我乐意帮助创建一个 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

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

完整发布说明

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

衷心感谢所有参与此版本发布的人——是你们让 Nuxt 成为可能。❤️

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