What are the practical considerations when adopting Vapor Mode for a large Vue app?

Vapor Mode demands gradual adoption via .vapor.vue files, Vue 3.6+ alphas, and testing SSR hydration compatibility in large apps.​

Start with performance-critical components only, as full-app migration breaks existing vDOM interop until stable release.​

Teams must verify bundle size wins (60% smaller) against hydration mismatches and limited directive support in beta.​​

Mixing Vapor/non-Vapor components works but requires Vite alias config and alpha channel monitoring.

Code

<script setup>
import { ref, onMounted } from 'vue/vapor'

const count = ref(0)
onMounted(() => console.log('Vapor mounted'))
</script>

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