Vue 3.3 已发布,带来了许多激动人心的新特性,尤其是在类型支持方面。
defineOptions 宏这也显著改善了在嵌套页面之间导航时的数据获取性能(#20777),这要归功于@antfu等等@baiwusanyu-c.
阅读完整的发布公告以获取更多详细信息。
我们一直在改进 Nitro,这些改进已在 Nitro v2.4 中实现——您可能已经升级到此版本,其中包含大量错误修复、Cloudflare 模块 worker 格式更新、Vercel KV 支持等等。
请注意:如果您部署到 Vercel 或 Netlify 并希望受益于增量静态生成,您现在应该更新您的路由规则
routeRules: {
-- '/blog/**': { swr: 3000 },
++ '/blog/**': { isr: 3000 },
}
阅读完整的发布说明。
丰富的 JSON 有效载荷序列化现已默认启用(#19205, #20770)。这既更快又允许在从 Nuxt 服务器传递到客户端的有效载荷中序列化复杂的对象(以及在为预渲染站点提取有效载荷数据时)。
这意味着各种丰富的 JS 类型现已开箱即用:正则表达式、日期、Map 和 Set 以及 BigInt 以及 NuxtError——还有 Vue 特定的对象,如 ref、reactive、shallowRef 和 shallowReactive。
您可以在我们的测试套件中找到一个示例。
这一切都归功于Rich-Harris/devalue#58。长期以来,由于序列化错误和其他非 POJO 对象的问题,Nuxt 一直使用我们自己的 devalue 分支,但我们现在已回归到原始版本。
您甚至可以使用新的对象语法 Nuxt 插件注册您自己的自定义类型
export default definePayloadPlugin(() => {
definePayloadReducer('BlinkingText', data => data === '<original-blink>' && '_')
definePayloadReviver('BlinkingText', () => '<revivified-blink>')
})
您可以阅读更多关于此如何工作的信息此处.
此功能应被视为高度实验性,但由于 @huang-julien 的出色工作,我们现在通过插槽支持服务器组件中的交互式内容(#20284).
您可以在此处关注服务器组件路线图#19772.
您现在可以在 nuxt.config.ts 中配置完全类型化的、按环境覆盖的配置
export default defineNuxtConfig({
$production: {
routeRules: {
'/**': { isr: true }
}
},
$development: {
//
}
})
如果您正在编写层,您还可以使用 $meta 键来提供您或您的层使用者可能使用的元数据。
阅读更多关于按环境覆盖的信息.
通过与unplugin-vue-router的实验性集成,您可以在 Nuxt 应用程序中受益于完全类型化的路由——这要归功于@posva!
的出色工作。开箱即用,这将启用 navigateTo、<NuxtLink>、router.push() 等的类型化使用。
您甚至可以通过使用 const route = useRoute('route-name') 在页面内获取类型化参数。
直接在 nuxt.config.ts 中启用此功能
export default defineNuxtConfig({
experimental: {
typedPages: true
}
})
我们现在在 Nuxt 中完全支持 bundler 策略的模块解析.
我们建议尽可能采用这种方式。它支持子路径导出类型,但更精确地匹配 Vite 和 Nuxt 等构建工具的行为,而不是 Node16 解析。
export default defineNuxtConfig({
typescript: {
tsConfig: {
compilerOptions: {
moduleResolution: 'bundler'
}
}
}
})
这开启了 TypeScript “跟随” Node 子路径导出的能力。例如,如果一个库有一个子路径导出,如 mylib/path 映射到 mylib/dist/path.mjs,那么其类型可以从 mylib/dist/path.d.ts 中提取,而无需库作者创建 mylib/path.d.ts。
我们计划在 IDE 中改进应用程序的“nitro”和“vue”部分之间的清晰度,我们通过为您的 ~/server 目录生成单独的 tsconfig.json 来发布了第一部分(#20559).
您可以通过添加一个额外的 ~/server/tsconfig.json 并包含以下内容来使用
{
"extends": "../.nuxt/tsconfig.server.json"
}
尽管目前这些值在类型检查时(nuxi typecheck)不会被尊重,但您应该在 IDE 中获得更好的类型提示。
尽管我们没有为 Nuxt 2 中的 build.extend 钩子提供类型或文档,但我们一直在 webpack 构建器中调用它。我们现在明确弃用此功能,并将在未来的次要版本中将其移除。
像往常一样,我们建议您运行以下命令进行升级
npx nuxi upgrade --force
这也将刷新你的 lockfile,并确保你拉取 Nuxt 依赖的其他依赖项(尤其是在 unjs 生态系统中)的更新。