通过 100 多个技巧学习 Nuxt!
发布·  

Nuxt 3.9

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

所有参与此版本的 Nuxt 成员祝您和您的家人圣诞快乐!🎁🎄

我们在 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 组合式 API,让您可以控制/停止/启动加载状态。如果您喜欢,也可以挂钩到 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>

请注意,此实用程序具有上下文感知能力,因此*必须*在组件设置函数或 Nuxt 插件中调用它,就像其他 Nuxt 组合式 API 一样。

文档 > API > 实用程序 > 调用一次 中阅读更多信息。

🚨 错误类型

一段时间以来,useAsyncDatauseFetch 返回的错误都被非常泛型地键入为 Error。我们已经显著改进了它们的类型可能性,使其在您实际收到的内容方面更加准确。(我们在底层使用 h3 createError 实用程序对错误进行规范化,例如,它们可以从服务器序列化到客户端。)

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

🔥 Schema 性能

我们在此版本中花了一些时间进行一些小的性能改进,因此您应该会注意到有些事情会更快一些。这是一个正在进行的项目,我们有一些想法可以改善 Nuxt 开发服务器的初始加载时间。

✅ 升级

与往常一样,我们建议的升级方法是运行

npx nuxi upgrade

完整发行说明

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

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

Nuxting 愉快 ✨