参与此版本发布的所有 Nuxt 开发者祝您和您的家人圣诞快乐!🎁🎄
v3.9 中包含了大量新功能,我们迫不及待地想让您尝试它们。
此版本支持 Vite 5 和 Rollup 4。模块作者可能需要检查以确保您正在创建的任何 Vite 插件都与这些最新版本兼容。
这带来了一系列重大改进和错误修复——请查看Vite 变更日志了解更多信息。
此版本已使用最新的 Vue 3.4 发布候选版本进行测试,并具有必要的配置以利用Vue 3.4 中的新功能,包括在生产环境中调试水合错误(只需在 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 指令指定要进行水合的组件
<NuxtLink :to="/" nuxt-client />
我们对此非常兴奋——请务必告诉我们您是如何使用它的!🙏
我们现在使用 Vite 新的 AST 感知“定义”对服务器端代码执行更精确的替换,这意味着像这样的代码将不再抛出错误
<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
}
}
})
我们现在为 <NuxtLoadingIndicator> 提供了一个新的基于钩子的系统,包括一个 useLoadingIndicator 可组合函数,它允许您控制/停止/启动加载状态。如果您愿意,您还可以钩入 page:loading:start 和 page:loading:end。
callOnce 中运行一次性事件有时您只想运行一次代码,无论您加载页面多少次——并且如果它在服务器上运行过,您就不想在客户端再次运行它。
为此,我们有一个新的实用工具:callOnce(#24787).
<script setup>
const websiteConfig = useState('config')
await callOnce(async () => {
console.log('This will only be logged once')
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 愉快 ✨