移植了一些为 Nuxt4 构建的新功能!
🏘️ 路由组
支持用(xxx)的方式命名路由,以便在不影响路径的情况下组织路由。
例如:
-| pages/
---| index.vue
---| (marketing)/
-----| about.vue
-----| contact.vue
这会生成/,/about和/contact页面。marketing会被忽略。
查看更多the original PR
🏝️ Islands 和 Head 元数据
现在,独立服务器组件(Islands组件)可以操纵head,例如在渲染时添加 SEO 元数据。
查看更多#27987
🪝 自定义预取触发
NuxtLink支持自定义预取触发(#27846)
例如:
<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).
在 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
🥳 结语
第一次写文章,如果有什么不对的地方,请多多指教🤝