danielroe.dev / nuxt-vapor-demo
[READ-ONLY] Mirror of https://github.com/danielroe/nuxt-vapor-demo. A demo showcasing Vue's new Vapor Mode compilation with benchmark tests inspired by js-framework-benchmark. nuxt-vapor-demo.vercel.app
demo nuxt vapor vue
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

Vue 79.2%
TypeScript 11.8%
Other 9.0%
5 2 0

Clone this repository

https://git.vm.fail/danielroe.dev/nuxt-vapor-demo https://git.vm.fail/did:plc:zm4pb6pckgdgdotb5gcvmjzw
ssh://git@knot1.tangled.sh:2222/danielroe.dev/nuxt-vapor-demo ssh://git@knot1.tangled.sh:2222/did:plc:zm4pb6pckgdgdotb5gcvmjzw

For self-hosted knots, clone URLs may differ based on your setup.


Download tar.gz Download .zip
README.md

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#

  1. Toggle between Vapor and traditional Vue components
  2. Run benchmark operations to compare performance
  3. 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.