Nuxt 3.16 · Nuxt 博客

这次更新内容非常丰富！

⚡️ 全新 New Nuxt

欢迎使用 create-nuxt，一个用于启动 Nuxt 项目的新工具（非常感谢 @devgar 捐赠的包名）！

它是 nuxi init 的精简版本 - 只有其六分之一的大小，并捆绑为包含所有内联依赖项的单个文件，以尽可能快地启动您的项目。

启动新项目非常简单，只需

npm create nuxt

screenshot of create nuxt app

特别感谢 @cmang 提供的精美的 ASCII 艺术。❤️

想了解更多关于 Nuxt CLI 的未来规划吗？请查看我们的路线图这里，包括我们关于交互式模块选择器的计划。

🚀 Unhead v2

我们已升级到 unhead v2，它是 Nuxt <head> 管理背后的引擎。这个主要版本移除了已弃用的功能，并改进了上下文的工作方式

对于 Nuxt 3 用户，我们发布了旧版兼容构建，因此不会有任何破坏性更改
现在，上下文实现通过 Nuxt 本身更加直接

// Nuxt now re-exports composables while properly resolving the context
export function useHead(input, options = {}) {
  const unhead = injectHead(options.nuxt)
  return head(input, { head: unhead, ...options })
}

如果您在应用中直接使用 Unhead，请注意

从 Nuxt 的自动导入或 #app/composables/head 导入，而不是从 @unhead/vue 导入
直接从 @unhead/vue 导入可能会丢失异步上下文

不过不用担心 - 我们在 Nuxt 3 中保持了向后兼容性，因此大多数用户无需进行任何更改！

如果您选择了 compatibilityVersion: 4，请查看我们的升级指南，了解其他更改。

🔧 Devtools v2 升级

Nuxt Devtools 已升级到 v2 (#30889)！

您会喜欢新功能，例如自定义编辑器选择、用于检查已解析配置的 Discovery.js（非常适合调试）、模式生成器的回归以及更精简的依赖项。

我们最喜欢的一项改进是能够跟踪模块如何修改您的 Nuxt 配置 - 让您像 X 射线一样看清幕后发生的事情。

👉 在 Nuxt DevTools 发行说明中了解所有详细信息。

⚡️ 性能改进

我们正在继续使 Nuxt 更快，v3.16 中包含许多改进

使用 exsolve 进行模块解析 (#31124) 以及 unjs 生态系统的其余部分（nitro、c12、pkg-types 等）- 这极大地加快了模块解析速度
更智能的模块解析路径 (#31037) - 优先考虑直接导入以提高效率
消除重复的 Nitro 别名解析 (#31088) - 更精简的文件处理
通过跳过不必要的解析步骤来简化 loadNuxt (#31176) - 更快的启动速度
在 Nuxt 插件中采用 oxc-parser 进行解析 (#30066)

所有这些速度提升都是自动发生的 - 无需配置！

感谢 CodSpeed 和 Vitest 基准测试，它们帮助我们在 CI 中衡量这些改进 - 这真的很有帮助。

为了增加一些轶事证据，我的个人网站 roe.dev 在 v3.16 下加载速度提高了 32%，而 nuxt.com 快了 28%。我希望您也能看到类似的结果！⚡️

🕰️ 延迟水合支持

我们非常高兴为您带来原生的延迟/懒加载水合支持 (#26468)！这使您可以精确控制组件何时水合，从而提高初始加载性能和可交互时间。我们正在利用 Vue 的内置水合策略 - 在 Vue 文档中查看它们。

<template>
  <!-- Hydrate when component becomes visible in viewport -->
  <LazyExpensiveComponent hydrate-on-visible />
  
  <!-- Hydrate when browser is idle -->
  <LazyHeavyComponent hydrate-on-idle />
  
  <!-- Hydrate on interaction (mouseover in this case) -->
  <LazyDropdown hydrate-on-interaction="mouseover" />
  
  <!-- Hydrate when media query matches -->
  <LazyMobileMenu hydrate-on-media-query="(max-width: 768px)" />
  
  <!-- Hydrate after a specific delay in milliseconds -->
  <LazyFooter :hydrate-after="2000" />
</template>

您还可以使用 @hydrated 事件监听水合何时发生

<LazyComponent hydrate-on-visible @hydrated="onComponentHydrated" />

在我们的组件文档中了解更多关于懒加载水合的信息。

🧩 高级页面配置

现在，您可以微调 Nuxt 扫描页面的文件 (#31090)，从而更好地控制项目结构

nuxt.config.ts

export default defineNuxtConfig({
  pages: {
    // Filter specific files or directories
    pattern: ['**/*.vue'],
  }
})

🔍 增强的调试

我们使使用 debug 选项进行调试更加灵活！现在您可以仅启用您需要的调试日志 (#30578)

nuxt.config.ts

export default defineNuxtConfig({
  debug: {
    // Enable specific debugging features
    templates: true,
    modules: true,
    watchers: true,
    hooks: {
      client: true,
      server: true,
    },
    nitro: true,
    router: true,
    hydration: true,
  }
})

或者保持简单，使用 debug: true 启用所有这些调试功能。

🎨 装饰器支持

对于装饰器的粉丝（无论您是谁！），我们添加了实验性支持 (#27672)。与所有实验性功能一样，我们非常感谢您的反馈。

nuxt.config.ts

export default defineNuxtConfig({
  experimental: {
    decorators: true
  }
})

function something (_method: () => unknown) {
  return () => 'decorated'
}

class SomeClass {
  @something
  public someMethod () {
    return 'initial'
  }
}

const value = new SomeClass().someMethod()
// returns 'decorated'

📛 命名图层别名

这是用户期待已久的功能，现在它来了！自动扫描的本地图层（来自您的 ~~/layers 目录）现在会自动创建别名。您可以通过 #layers/test 访问您的 ~~/layers/test 图层 (#30948) - 无需配置。

如果您想要其他图层的命名别名，您可以向图层配置添加名称

nuxt.config.ts

export default defineNuxtConfig({
  $meta: {
    name: 'example-layer',
  },
})

这将创建指向您的图层的别名 #layers/example-layer - 使导入更简洁直观。

🧪 错误处理改进

我们大大改进了错误消息和源跟踪 (#31144)

改进了未定义 useAsyncData 调用的警告，并提供精确的文件位置信息
错误页面现在可以在 island 页面错误上正确显示 (#31081)

此外，我们现在使用 Nitro 美观的错误处理（由 youch 提供支持）在终端中提供更有帮助的错误消息，并完整支持堆栈跟踪。

Nitro 现在还自动应用源地图，而无需额外的 Node 选项，并且我们在渲染错误页面时设置了适当的安全标头。

📦 模块开发改进

对于模块作者，我们添加了使用 addTypeTemplate 增强 Nitro 类型的能力 (#31079)

// Inside your Nuxt module
export default defineNuxtModule({
  setup(options, nuxt) {
    addTypeTemplate({
      filename: 'types/my-module.d.ts',
      getContents: () => `
        declare module 'nitropack' {
          interface NitroRouteConfig {
            myCustomOption?: boolean
          }
        }
      `
    }, { nitro: true })
  }
})