Vapor Mode

Vapor Mode is Vue's compilation mode without a virtual DOM: templates compile to code that creates and updates DOM nodes directly. Vize has its own Vapor compiler, so the same Vite plugin, CLI, linter, and inspector handle Vapor components.

Warning

Vapor Mode needs Vue 3.6 or newer and is experimental in both Vue and Vize. Start with a few components, compare them in the Playground, and keep VDOM for the rest.

Which components compile to Vapor

JSX and TSX components follow jsxMode and the "use vue:vapor" directive instead; see JSX and TSX.

One component at a time

Add the vapor attribute to the component's script block. Nothing else changes:

<script setup vapor>
import { ref } from "vue";

const count = ref(0);
</script>

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

This is the safest way to start, because every other component keeps its current output. Mounting Vapor components inside a VDOM app uses Vue's runtime APIs (such as vaporInteropPlugin); see the Vapor announcement for the runtime side.

The whole project

Compile every SFC to Vapor from vite.config.ts:

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    compiler: { vapor: true },
  },
});

With the plain Vite plugin, pass the option directly:

import { defineConfig } from "vite";
import vize from "@vizejs/vite-plugin";

export default defineConfig({
  plugins: [vize({ vapor: true })],
});

In Nuxt, set vize.compiler.vapor in nuxt.config.ts; see the Nuxt integration.

JSX and TSX

.jsx and .tsx components choose their output with compiler.jsxMode ("vdom" by default) or a directive at the top of the component:

const Fast = () => {
  "use vue:vapor";
  return <div class="fast" />;
};

JSX and TSX: output mode covers the precedence rules.

Inspect the output

Compare Vize's Vapor output with Vue's compiler for one file, either in the Playground or from the terminal:

vize build --vapor src/components/Counter.vue
vize inspector src/components/Counter.vue --target vapor

Lint for Vapor

Some APIs do not exist or behave differently in Vapor components, such as the Options API, getCurrentInstance(), and @vue: lifecycle events. The Vapor rules catch them before runtime. Rules such as vapor/no-vue-lifecycle-events are in the default preset.

Current limits

• Vapor output follows Vue 3.6's runtime; components need a Vue version that ships Vapor.
• For JSX and TSX, keeping module-level imports and exports intact in Vapor output is still incomplete; see JSX and TSX.
• When Vize's output differs from Vue's, the official compiler is the reference. Please report the difference with an inspector link.