Nuxt Vapor Mode Demo#

Performance comparison between Vue 3.6 Vapor Mode and traditional VDOM rendering

A demo showcasing Vue's new Vapor Mode compilation with benchmark tests inspired by js-framework-benchmark.

Features#

Built on Nuxt with native Vapor Mode support (nuxt/nuxt#35772 preview) enabled via vue: { vapor: true } in nuxt.config.ts; track nuxt/nuxt#35759 for the upstream implementation
Vapor Mode components with <script setup vapor> (Vue 3.6 rc)
Side-by-side performance comparison
Benchmark operations: create, update, delete, swap rows
Real-time performance measurements

Try it out locally#

# install dependencies
pnpm install

# serve in dev mode at localhost:3000
pnpm dev

# build for production
pnpm build

# preview in production mode
pnpm preview

How to use#

Toggle between Vapor and traditional Vue components
Run benchmark operations to compare performance
Observe execution times and rendering differences

Technical notes#

Vapor Mode enables direct DOM manipulation without Virtual DOM overhead, potentially improving:

Bundle size (no VDOM runtime)
Memory usage
Rendering performance for large lists

NOTE

This demo mixes Vapor and VDOM components, so Nuxt automatically installs Vue's interop plugin and the VDOM runtime is still present.

IMPORTANT

Vapor Mode is feature-complete in the Vue 3.6 RC, including SSR hydration, but some limitations remain: no Options API support, and features that depend on VNodes or the component public instance proxy are unavailable in Vapor components.

License#

Made with ❤️

Published under MIT License.

Configure Feed