How to install Vue 3.6 Vapor Mode in existing Vite projects?

npm install vue@next @vue/vapor@alpha
      

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'vue/vapor': 'vue/dist/vue-vapor.esm.js'
    }
  }
})
      

// main.ts
import { createApp } from 'vue'
import { vaporInteropPlugin } from 'vue/vapor'
import App from './App.vue'

createApp(App)
  .use(vaporInteropPlugin())
  .mount('#app')
      

<!-- Counter.vapor.vue -->
<script setup vapor>
import { ref } from 'vue/vapor'
const count = ref(0)
</script>

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

npm run dev