祝你和你的家人圣诞快乐!🎁🎄
我们在v3.9中添加了许多功能,迫不及待地想让你来尝试。
⚡️ Vite 5
这个版本集成了Vite 5和Rollup 4支持。模块作者可能需要检查一下,确保你创建的任何Vite插件与这些最新版本兼容。
这个版本带来了许多改进和bug修复 - 请查看 Vite的更新日志 以获取更多信息。
✨ Vue 3.4 准备就绪
这个版本经过了最新的Vue 3.4版本候选版的测试,并且具有必要的配置,以利用 Vue 3.4中的新功能,包括在生产环境中调试hydration错误(只需在你的Nuxt配置中设置 debug: true
)。
👉 要享受这些新功能,只需在v3.4发布后更新你的 vue
版本,或者今天就尝试一下发布候选版:
{
"dependencies": {
"nuxt": "3.9.0",
"vue": "3.4.0-rc.1",
"vue-router": "latest"
}
}
🏝️ 交互式服务器组件
这是一个高度实验性的更新,但现在可以在Nuxt服务器组件中使用交互式组件。你需要额外启用这个新功能以及组件岛:
export default defineNuxtConfig({
experimental: {
componentIslands: {
selectiveClient: true
}
}
})
现在,在服务器组件中,你可以使用 nuxt-client
指令来指定要hydrate的组件:
<NuxtLink :to="/" nuxt-client />
我们对这个功能非常兴奋 - 所以请告诉我们你是如何使用它的!🙏
🔥 自动服务器优化
我们现在使用Vite的新AST-aware 'define'来对服务器端代码执行更准确的替换,这意味着像这样的代码将不再抛出错误:
<script setup lang="ts">
if (document) {
console.log(document.querySelector('div'))
}
</script>
直到现在,这是不可能的,因为我们不想冒险在应用程序的非JS部分中意外替换诸如 document
这样的普通单词。但是Vite的新 define
功能由 esbuild
提供支持,它具有语法意识,因此我们有信心启用这个功能。不过,如果需要的话,你可以选择退出:
export default defineNuxtConfig({
hooks: {
'vite:extendConfig' (config) {
delete config.define!.document
}
}
})
🚦 精细的加载API
我们现在有了一个基于hook的新系统用于 <NuxtLoadingIndicator>
,包括一个 useLoadingIndicator
组合,让你控制/停止/启动加载状态。你也可以选择钩入 page:loading:start
和 page:loading:end
。
🏁 在 callOnce
中运行单一事件
有时你只想运行一次代码,无论你加载页面多少次 - 并且如果它在服务器上运行过,你不希望在客户端再次运行。
为此,我们有一个新的实用程序:callOnce
(#24787)。
<script setup>
const websiteConfig = useState('config')
await callOnce(async () => {
console.log('这将只被记录一次')
websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})
</script>
请注意,这个实用程序是上下文感知的,因此它 必须 在组件设置函数或Nuxt插件中调用,就像其他Nuxt组合一样。
🚨 错误类型
有一段时间以来,useAsyncData
和 useFetch
返回的错误类型被类型化为相当通用的 Error
。我们已经显着改进了它们的类型可能性,以使它们在实际接收到的内容上更准确(我们在底层使用 h3
createError
实用程序来规范化错误,以便在服务器到客户端进行序列化)。
我们尝试以向后兼容的方式实现类型更改,但如果你手动配置这些组合的泛型,你可能会注意到需要更新泛型。请查看 (#24396) 获取更多信息,如果你遇到任何问题,请告诉我们。
🔥 架构性能
在这个版本中,我们花了一些时间进行一些小的性能改进,所以你应该注意到某些东西变得更快了。这是一个持续的项目,我们有改进Nuxt开发服务器的初始加载时间的想法。
✅ 升级
像往常一样,我们建议你运行:
npx nuxi upgrade
完整的发布说明
感谢你读到这里!希望你喜欢这个新版本。如果你有任何反馈或问题,请告诉我们。
Nuxting愉快 ✨