大家好！今天我要为大家介绍的是Nuxt团队送出的圣诞礼物 —— Nuxt 3.9版本！这个版本带来了Vite 5、交互式服务器组件、新的composables、全新的加载API等众多新功能。文章作者Daniel Roe给大家传达了节日的问候，并分享了Nuxt 3.9的亮点。

⚡️ Vite 5的加入

Nuxt 3.9支持Vite 5和Rollup 4。如果你是模块作者，可能需要检查一下你创建的vite插件是否与这些最新版本兼容。这一更新带来了许多改进和bug修复，你可以查看Vite的更新日志了解更多。

https://vitejs.dev/guide/migration.html#migration-from-v4

✨ 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服务器组件中尝试交互式组件。要启用这个新功能，你需要在配置中额外启用组件岛屿（component islands）功能。

// nuxt.config.tsexport default defineNuxtConfig({ experimental: { componentIslands: { selectiveClient: true } }})

现在，在服务器组件中，你可以使用nuxt-client指令指定要hydrate的组件：

// components/SomeComponent.server.vue<NuxtLink :to="/" nuxt-client /> 自动服务器优化

Nuxt团队现在使用Vite的新AST-aware 'define'进行服务器端代码的更精确替换，这意味着像下面这样的代码不再会引发错误：

// app.vue<script setup lang="ts">if (document) { console.log(document.querySelector('div'))}</script> 精细化加载API

Nuxt团队引入了一个新的基于钩子的系统，用于<NuxtLoadingIndicator>，包括一个useLoadingIndicator composables，让你可以控制/停止/开始加载状态。如果你愿意，也可以挂钩到page:loading:start和page:loading:end。

callOnce中运行单一事件

有时你只想运行一次代码，不管你加载了多少次页面，并且如果它在服务器上运行了，你不想在客户端再运行它。为此，Nuxt团队有了一个新工具：callOnce。

// 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> 错误类型

Nuxt团队改进了useAsyncData和useFetch返回的错误类型，使其更加准确。

Schema性能

Nuxt团队在这个版本中进行了一些性能优化，所以你会注意到一些事情变得更快了。

✅ 升级建议

我们建议使用以下命令进行升级：

nuxi upgrade