Vue Vapor compilation strategy

[septatrix]

It has recently come to my attention, that there is a very experiment/early alpha project which aims to compile components or the whole app to code without a virtual DOM similar to svelte/solid.js (see https://twitter.com/_jessicasachs/status/1532283507145420801?lang=en).

Is this (code) published anywhere or is there some place to obtain more information? The project seems really promising!

[septatrix]

Are you able to provide any update in this project, please? @yyx990803

[yyx990803]

This is still in experimentation phase. There is still a lot of work to do, in particular how it can be integrated in existing applications with minimal friction. It may still change very drastically, and we don't want to give people wrong impressions / expectations before it's ready. We will open source it once it's more stable.

[pauloevpr]

My team is currently evaluating whether or not we should move from SFC to JSX. Is there any indication at the moment that Vapor will be incompatible with JSX?

[TheJaredWilcurt]

A suggestion to reduce friction. It would be very ugly to deal with naming every file in an app Something.vapor.vue, as was presented recently.

1. I think <template vapor> (or <script vapor>) in the .vue file is a pretty clean way to opt-in to the feature at that component level.
2. Instead of changing your import of Vue at the global level, just add it as an option when creating the app.

import { createApp } from 'vue';
import App from '@/App.vue';

const app = createApp(App);
app.config.globalProperties.vapor = true;
app.mount('#app');

Then you could opt-out in components with <template vapor="false">.

Just some ideas on DX for the feature while it's still in the oven.

[septatrix]

For everyone watching this, I found out about the vuejs/core-vapor repository today where the current state seems to be published. In the readme is also a checklist of stuff which does and does not work yet.