Vue Vapor Mode officially reached stable status in Vue 3.6. This is the most significant runtime architecture change in Vue's history — it completely bypasses the virtual DOM and compiles directly to native DOM operations, achieving performance close to hand-written JavaScript. For performance-sensitive scenarios, Vapor Mode is a true game changer.

What is Vapor Mode

Traditional Vue components compile to render functions, and at runtime the virtual DOM diff updates the real DOM. Vapor Mode skips the virtual DOM layer entirely — the compiler directly generates DOM API calls.

<!-- Source: standard Vue component -->
<script setup>
import { ref } from "vue";

const count = ref(0);
const increment = () => count.value++;
</script>

<template>
  <div class="counter">
    <p>Count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<!-- Compiled output (Vapor Mode) -->
<script>
import {
  ref,
  renderEffect as _renderEffect,
  template as _template,
} from "vue/vapor";

const _tmpl = _template(
  '<div class="counter"><p>Count: <!--t--></p><button>+1</button></div>',
);

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;

    const __returned__ = { count, increment };
    const n0 = _tmpl();
    const n1 = n0.firstChild;
    const t0 = n1.firstChild.nextSibling; // text node placeholder

    // Direct binding: no virtual DOM diff
    _renderEffect(() => {
      t0.textContent = `Count: ${count.value}`;
    });

    n0.lastChild.addEventListener("click", increment);
    return __returned__;
  },
};
</script>

The key difference: _renderEffect directly operates on textContent — no vnode creation, no diff, no patch. Both memory usage and CPU consumption are drastically reduced.

Performance Benchmark

In our benchmark, the performance difference between Vapor Mode and standard mode is very pronounced:

// Test scenario: sorting and filtering a 1000-row table
// Device: MacBook Air M3, Chrome 131

// Standard mode (Virtual DOM)
// Initial render:   48ms
// Sort update:      12ms (diff + patch 1000 nodes)
// Memory usage:     28MB (vnode tree)
// GC pauses:        3-5ms

// Vapor Mode (compiled to native DOM)
// Initial render:   31ms  (-35%)
// Sort update:      3ms   (-75%, direct DOM ops)
// Memory usage:     11MB  (-61%, no vnode tree)
// GC pauses:        <1ms

// Extreme case: scrolling a 10000-row list
// Standard mode: 42fps (noticeable frame drops)
// Vapor Mode:    59fps (near-native)

The 61% memory reduction is the most significant improvement. The virtual DOM tree itself carries non-trivial memory overhead — Vapor Mode eliminates it entirely.

Incremental Migration: Vapor SFC

Vapor Mode supports enabling on a per-component basis. You can selectively enable Vapor for performance-critical components while keeping others in standard mode:

<!-- Enable with the vapor attribute -->
<script setup vapor>
import { ref, computed } from 'vue';

// This component compiles to Vapor mode
const props = defineProps<{ items: Item[] }>();
const sorted = computed(() =>
  [...props.items].sort((a, b) => b.score - a.score)
);
</script>

<template>
  <ul>
    <li v-for="item in sorted" :key="item.id">
      {{ item.name }} - {{ item.score }}
    </li>
  </ul>
</template>

// vite.config.ts - Vapor Mode configuration
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    vue({
      vapor: {
        // Enable globally (all SFCs default to Vapor)
        enable: true,
        // Or enable by directory
        include: ["src/components/heavy/**/*.{vue,tsx}"],
        exclude: ["src/components/legacy/**"],
      },
    }),
  ],
});

In mixed mode, Vapor components and standard Vue components can be seamlessly nested. A Vapor parent with a standard child, or vice versa — both work correctly.

Vapor Mode Limitations

Vapor Mode is powerful, but there are a few current limitations to be aware of:

<!-- ❌ Features not supported in Vapor Mode -->
<script setup vapor>
import { ref } from "vue";

// ❌ Dynamic components: must be determined at compile time
// const comp = ref(AComponent);
// <component :is="comp" />

// ❌ Teleport / Transition components
// <Teleport to="body">...</Teleport>

// ❌ Render function components
// const MyComp = { render() { return h('div') } }
</script>

<!-- ✅ Features fully supported in Vapor Mode -->
<template>
  <!-- Conditional rendering -->
  <div v-if="show">Content</div>

  <!-- List rendering -->
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>

  <!-- Event binding -->
  <button @click="handleClick">Click</button>

  <!-- Two-way binding -->
  <input v-model="text" />

  <!-- Slots -->
  <slot name="header" />
  <slot :data="data" />
</template>

If your component uses Teleport or dynamic components, don't enable Vapor for now. The Vue team plans to fill these gaps in 3.7.

Real-World Migration Recommendations

// Migration strategy: run benchmarks first, then enable gradually
// 1. Use Vue DevTools to identify performance bottleneck components
// 2. Enable Vapor for data-intensive components
// 3. Run integration tests to confirm functionality
// 4. Compare before/after performance data

// Recommended component types for Vapor:
// ✅ Large lists / tables
// ✅ High-frequency chart components
// ✅ Real-time data display panels
// ✅ Animation-heavy components

// Not yet recommended:
// ❌ Modal components that use Teleport
// ❌ Third-party library components that rely on render functions
// ❌ Page-level components using keep-alive

Summary