Nuxt Nation 大会即将到来。加入我们,时间为 11 月 12 日至 13 日。
发布·  

Nuxt 3.9

Nuxt 3.9 发布了 - Nuxt 团队送出的圣诞礼物,带来了 Vite 5、交互式服务器组件、新的组合式函数、新的加载 API 等功能。

祝你和你的家人圣诞快乐,来自参与此次发布的所有 Nuxters!🎁🎄

我们在 v3.9 中添加了许多功能,迫不及待地想让你尝试一下。

⚡️ Vite 5

此版本附带 Vite 5 和 Rollup 4 支持。模块作者可能需要检查以确保他们创建的任何 Vite 插件都与这些最新版本兼容。

这带来了大量改进和错误修复 - 查看Vite 变更日志以获取更多信息。

✨ 兼容 Vue 3.4

此版本已使用最新的 Vue 3.4 发布候选版本进行了测试,并具有必要的配置以利用Vue 3.4 中的新功能,包括在生产环境中调试水合错误(只需在你的 Nuxt 配置中设置debug: true)。

👉 要利用此功能,只需在发布 v3.4 后更新你的vue版本,或立即试用发布候选版本。

package.json
{
  "dependencies": {
    "nuxt": "3.9.0",
    "vue": "3.4.0-rc.1",
    "vue-router": "latest"
  }
}

🏝️ 交互式服务器组件

这是一个高度实验性的更新,但现在可以在 Nuxt 服务器组件中使用交互式组件。你需要另外启用此新功能才能使用组件岛。

nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    componentIslands: {
      selectiveClient: true
    }
  }
})

现在,在服务器组件中,你可以使用nuxt-client指令指定要水合的组件。

components/SomeComponent.server.vue
<NuxtLink :to="/" nuxt-client />

我们对此非常兴奋 - 所以请告诉我们你是如何使用它的!🙏

🔥 自动服务器优化

我们现在使用 Vite 的新的 AST 感知“define”对服务器端代码执行更准确的替换,这意味着像这样的代码将不再抛出错误。

app.vue
<script setup lang="ts">
if (document) {
  console.log(document.querySelector('div'))
}
</script>

这在以前是不可能的,因为我们不想冒在应用程序的非 JS 部分意外替换document等普通单词的风险。但是 Vite 的新define功能由esbuild提供支持,并且是语法感知的,因此我们有信心启用此功能。不过,如果你需要,可以选择退出。

nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    'vite:extendConfig' (config) {
      delete config.define!.document
    }
  }
})

🚦 粒度加载 API

我们现在有一个新的基于钩子的系统用于<NuxtLoadingIndicator>,包括一个useLoadingIndicator组合式函数,允许你控制/停止/启动加载状态。如果你愿意,也可以连接到page:loading:startpage:loading:end

你可以在文档中以及原始 PR (#24010) 中了解更多信息。

🏁 在callOnce中运行单次事件

有时你只想运行一次代码,无论你加载页面多少次 - 并且如果它在服务器端运行,你不想在客户端再次运行它。

为此,我们提供了一个新的实用程序:callOnce (#24787).

app.vue
<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>

请注意,此实用程序是上下文感知的,因此它必须在组件的 setup 函数或 Nuxt 插件中调用,就像其他 Nuxt 组合式函数一样。

文档 > API > 实用程序 > Call Once中了解更多信息。

🚨 错误类型

一段时间以来,useAsyncDatauseFetch返回的错误都被非常通用地类型化为Error。我们已经显着改进了它们的类型可能性,使它们在接收到的内容方面更加准确。(我们使用h3createError实用程序在幕后规范化错误,以便它们可以例如从服务器序列化到客户端。)

我们尝试以向后兼容的方式实现类型更改,但你可能会注意到,如果你手动配置这些组合式函数的泛型,则需要更新泛型。请参阅 (#24396) 以获取更多信息,如果遇到任何问题,请告知我们。

🔥 架构性能

我们在本次发布中花了一些时间进行了一些小的性能改进,因此你应该会注意到某些操作速度更快。这是一个持续的项目,我们有想法来改进 Nuxt 开发服务器的初始加载时间。

✅ 升级

像往常一样,我们建议你运行以下命令进行升级

npx nuxi upgrade

完整发布说明

阅读 Nuxt v3.9.0的完整发布说明。

感谢你阅读至此!我们希望你喜欢这个新版本。如有任何反馈或问题,请告知我们。

享受 Nuxt ✨

← 返回博客