🏘️ 路由组 (Route Groups)
我们现在支持使用圆括号/方括号命名目录来组织路由,而不会影响路径。
例如
-| pages/
---| index.vue
---| (marketing)/
-----| about.vue
-----| contact.vue
这将在你的应用中生成 /、/about 和 /contact 页面。 marketing 组在 URL 结构中会被忽略。
阅读更多内容请见原始 PR.
🏝️ Islands 组件与 Head 元数据
服务器组件 Islands 现在可以操作 head 了,例如在渲染时添加 SEO 元数据。
阅读更多内容请见#27987.
🪝 自定义预获取 (Prefetch) 触发器
我们现在支持为 NuxtLink 设置自定义预获取触发器(#27846).
例如
<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>
也可以在全局范围内为应用启用/禁用这些触发器,并针对单个链接进行覆盖。
例如
export default defineNuxtConfig({
experimental: {
defaults: {
nuxtLink: {
prefetch: true,
prefetchOn: { visibility: false, interaction: true }
}
}
}
})
🗺️ 更好的服务器 Source Maps
当使用 node --enable-source-maps 运行时,您可能注意到服务器构建中 Vue 文件的 source maps 指向了 Vite 构建输出(类似于 .nuxt/dist/server/_nuxt/index-O15BBwZ3.js)。
现在,即使在 Nitro 构建之后,您的服务器 source maps 也将引用原始源文件(#28521).
请注意,提高构建性能最简单的方法之一就是关闭不使用的 source maps,您可以在 nuxt.config.ts 中轻松完成此操作
export default defineNuxtConfig({
sourcemap: {
server: false,
client: true,
},
})
🎁 给模块作者的新功能
在迈向 Nuxt v4 的过程中,我们致力于为模块作者增加一些关键功能,包括在需要时使用新的 isNuxtMajorVersion 工具(#27579),以及通过新的 defineNuxtModule().with() 方法为合并后的模块选项提供更好的类型推断(#27520).
✨ 改进的开发警告
当在中间件中使用数据获取组合式函数 (composables) 时,我们不再发出警告(#28604),并且当用户组件名称以 Lazy 开头时,我们会发出警告(#27838).
🚨 Vue TypeScript 变更
长期以来,在 Vue 生态系统中,我们一直在通过增强 @vue/runtime-core 来向 vue 添加自定义属性等。然而,这无意中破坏了那些增强 vue 的项目的类型 —— 而这现在是增强这些接口的官方推荐和文档记录方式(例如,ComponentCustomProperties, GlobalComponents等等等等).
这意味着所有库都必须更新其代码(否则会破坏那些改为增强 vue 的库的类型)。
我们已经按照这些原则更新了 Nuxt 中的类型,但当您在使用尚未更新的库时,可能会遇到最新版 vue-router 的问题。
请通过创建带有复现步骤的 Issue 来反馈 —— 我很乐意帮助创建 PR 以解决相关的上游库问题。或者,您可以通过在项目根目录下创建一个 declarations.d.ts 文件并添加以下代码来临时绕过此问题(致谢@BobbieGoede@BobbieGoede):
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 成为可能。❤️
如果你有任何反馈或问题,请随时告诉我们!🙏