Nuxt 以 interop mode 支持 Vapor Mode：你的应用仍然使用 Virtual DOM 进行渲染，你可以将单个组件或页面编写为 Vapor 单文件组件，从而选择让它们使用 Vapor。这使你能够逐步采用 Vapor，而 Nuxt 的其余部分（路由、useAsyncData、布局以及大多数内置组件）仍可保持不变地工作。

启用 Vapor Mode

在 Nuxt 配置中启用 vue.vapor 选项：

nuxt.config.ts

export default defineNuxtConfig({
  vue: {
    vapor: true,
  },
})

这会安装 Vue 的 vaporInteropPlugin，使 Vapor 和 Virtual DOM 组件能够并行渲染。然后，你可以通过向 <script setup> 添加 vapor 属性，将任意组件或页面标记为 Vapor：

app/pages/index.vue

<script setup vapor lang="ts">
const count = ref(0)
</script>

<template>
  <button @click="count++">
    count is {{ count }}
  </button>
</template>

尝试使用

Vapor Mode 需要使用同时包含 Vapor 及其 interop 修复的 Vue 版本。在 Vue 3.6 处于预发布阶段期间，请安装包含这些修复的候选版本（或更高版本）：

package.json

{
  "dependencies": {
    "vue": "^3.6.0-rc.2"
  }
}

如果你在较旧版本的 Vue 上启用 vue.vapor，Nuxt 会发出警告并将其禁用。

我们建议你在全新项目中尝试 Vapor Mode，而不是将其添加到现有项目中。你也可以在 Nuxt Vapor demo 中了解一个可正常运行的配置。

已知限制

由于 Nuxt 在 interop mode 下运行 Vapor，一些依赖 Virtual DOM 的模式在 Vapor 组件中的行为会有所不同：

目前还不支持完整的 Vapor 应用。 应用根节点仍使用 Virtual DOM，你可以按组件选择启用 Vapor；未来我们可能会支持完整的 Vapor 应用。
Vapor 组件上的 模板 ref 不会暴露 $el。
一些内置组件会检查其插槽内容，因此无法读取 Vapor 插槽子节点。<ClientOnly> 会跳过其属性转发 fallthrough，而 <NuxtIsland>、服务器组件以及会读取文本子节点的 head 组件（例如 <Title>、<Style> 和 <Noscript>）在你传入 Vapor 插槽时会发出警告。请直接传入值（例如向 <Title> 传入字符串）。
Vapor 组件中不支持 Options API，因此无法通过 defineNuxtComponent 使用 asyncData 和 fetchKey。请改用带有 useAsyncData 的 <script setup>。
带键的 onPrehydrate 会回退到不带键的形式（并在开发环境中发出警告），因为没有组件实例可用于附加键。
Vapor <script setup> 中在 await 之后调用的 Nuxt composables 可能会丢失 Nuxt 上下文。在可能的情况下，请在第一个 await 之前调用它们。

大多数其他 Nuxt composables 和内置组件都可以保持不变地工作，因为它们依赖注入，而不是依赖组件实例。

Differences with Nuxt 2 / Vue 2

Nuxt 3+ 基于 Vue 3。新的主要 Vue 版本带来了若干变化，Nuxt 对这些变化进行了利用：

更好的性能
组合式 API（Composition API）
TypeScript 支持

更快的渲染

Vue 的虚拟 DOM（VDOM）已从头重写，从而带来更好的渲染性能。除此之外，在使用已编译的单文件组件时，Vue 编译器可以在构建时进一步优化它们，将静态和动态标记分离。

这带来了更快的首次渲染（组件创建）和更新，以及更少的内存使用。在 Nuxt 3 中，这也使得服务器端渲染更快。

更小的包体积

在 Vue 3 和 Nuxt 3 中，重点放在了减小包体积上。Vue 3 中的大部分功能，包括模板指令和内置组件，都是可进行 tree-shaking 的。如果你不使用它们，生产包将不会包含它们。

因此，一个最小的 Vue 3 应用可以被缩减到 12 kb（gzip 压缩后）。

组合式 API

在 Vue 2 中，向组件提供数据和逻辑的唯一方式是通过 Options API，它允许你通过预定义属性如 data 和 methods 向模板返回数据和方法：

<script>
export default {
  data () {
    return {
      count: 0,
    }
  },
  methods: {
    increment () {
      this.count++
    },
  },
}
</script>

Vue 3 中引入的组合式 API 并不是对 Options API 的替代，而是使得在整个应用中更好地复用逻辑成为可能，并且在复杂组件中按关注点组织代码更为自然。

在 <script> 定义中使用 setup 关键字时，下面是上述组件用组合式 API 和 Nuxt 3 自动导入的响应式 API 重写的示例：

components/Counter.vue

<script setup lang="ts">
const count = ref(0)
const increment = () => count.value++
</script>

Nuxt 的目标是围绕组合式 API 提供出色的开发者体验。

使用来自 Vue 的自动导入响应式函数和 Nuxt 的内置 composables。
在 app/composables/ 目录中编写你自己的可自动导入的可重用函数。

TypeScript 支持

Vue 3 和 Nuxt 3+ 都是用 TypeScript 编写的。完整的类型化代码库可以防止错误并记录 API 的使用方式。这并不意味着你必须用 TypeScript 编写应用才能利用它。在 Nuxt 3 中，你可以通过将文件从 .js 重命名为 .ts 来选择启用，或者在组件中添加 <script setup lang="ts">。

阅读关于 Nuxt 中 TypeScript 的详细信息

报告问题或者在 GitHub 上编辑此页面