All we know about Vue 3 Vapor Mode
Tags: webdev, javascript, vue, react
Published: 2023-09-28 18:25:04

## What is Vapor Mode? 🧐

Vapor Mode is a new and alternative compilation strategy inspired by [Solid.js](https://www.solidjs.com/). It aims to enhance your apps' performance by compiling your code into a more efficient JavaScript output.

When used at the app level, you can drop the Virtual DOM completely, thus reducing your app's bundle size.

### ✅ **Benefits**

* More performant
    
* Uses less memory
    
* Requires less runtime support code.
    

Solid.js has a very very similar reactivity system to Vue, they both use Proxies in their Reactive system with read-based auto-tracking. This is why Vue can implement a similar compilation strategy as Solid.js does.

### How does Vapor Mode work? 🤔

Given the same `.vue` Single File Component, Vapor mode will be able to compile it to a more performant JavaScript output.


![Vue Vapor Compilation Explanation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nyf8tvsvaeuv68tgip60.png)


To optimize the best performance, Vapor mode will only support a subset of Vue features, these being the new Composition API and `.vue` SFC's with `<script setup>`, Vue 3's new default way of writing apps. Read More on [Vue's Year in Review](https://blog.vuejs.org/posts/2022-year-in-review).

## What's the current approach?

Currently, Vue takes a hybrid VDOM/Compiler approach. The compiler takes the SFC's template, analyzes it and feeds a to the Virtual DOM.

This [Compiler-Informed Virtual DOM](https://vuejs.org/guide/extras/rendering-mechanism.html#compiler-informed-virtual-dom) approach allows Vue to [perform better](https://twitter.com/icarusgkx/status/1693620200543862852?s=20) than V-DOM-less tools like Svelte 4 when performing DOM operations by a small margin.

![Shows how Vue outperforms Svelte and React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8dyospuwvicwlmg5fpzm.png)

## How can I use Vapor Mode?

### At the Component level.

**You'll be able to enable it using the** `.vapor` filename postfix.

![Showing how you can enable Vapor mode by adding .vapor before .vue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ip94h35s3h6sgcazmy8.png)

**The end goal is to freely mix Vapor and non-Vapor components in the same app.**


![DOM tree with vDOM and Vapor components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5e1xx8rs83hit3wztgdj.png)


**📝 \* NOTE**  
Initially, Vapor Mode may begin with a vapor-only tree integrated into the vDOM, and then improve the interoperability between them from there on.

### At the App level.


![You can opt-in at the app level by marking you root App.vue with App.vapor.vue instead](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ymn3kjll22v72iauv5hj.png)


An app compiled this way will be able to drop the Virtual DOM runtime completely and will only include [`@vue/reactivity`](https://github.com/vuejs/core/tree/main/packages/reactivity) and the vapor mode runtime helpers which are **extremely** lightweight. An app written this way will have a **baseline** size of ~6kb, compared to the current ~50kb of a baseline Vue 3 app with vDOM. That's an **88%** reduction! 🤯

### Key points

* **It is an optional feature that won't affect existing codebases.**
    
    If you decide to upgrade your Vue version to one that includes Vapor Mode, this won't introduce any breaking changes related to Vapor Mode.
    
* **Vapor mode will be able to inter-operate with vDOM components.**
    
    So if you want to use any library that uses Virtual DOM like Vuetify, Vapor mode will still be able to support it.
    

## **Vapor Mode Stages**

While still in development we have some news on it:

### **Stage 1: Runtime for Core Features**

All the Vapor runtime helpers are introduced, these helpers are basically the code that helps out the generative code. This stage is pretty much done.

**❇️ Goals**

* Support core directives (`v-on, v-if, v-for, etc...`) and the component tree.
    
* Verify performance assumptions.
    
* Hydration compatibility with existing SSR output.
    

### **Stage 2: Compiler for Core Features**

The main focus here is to make sure that we can take a Vue template or JSX and turn it into something the runtime can handle.

**❇️ Goals**

* Shared code generation IR (Intermediate Representation)
    
* JSX AST / Template AST - IR - Vapor Mode code
    

**Why an Intermediate Representation?**

The compilation process for Vapor Mode eliminates the need for manual render function creation due to the absence of a virtual DOM. However, some users require the extensive flexibility of JavaScript. In such cases, it's possible to compile JSX into Vapor code.

Both templates and JSX undergo a transformation into the same **Intermediate Representation**, which ultimately compiles into Vapor code.


![Graphic demonstrating the IR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jab1j15bnwqkf0mhk96k.png)


### **Stage 3: Integration**

Vue aims to make Vapor seamlessly embeddable into your existing applications, without requiring any modifications to your current setup. You have the flexibility to opt-in at the component level, enabling you to gradually introduce it to a subset of your application or specifically to performance-critical areas.

**❇️ Goals**

* Tooling support for standalone Vapor apps
    
* Running Vapor components inside existing apps
    
* Running vDOM components inside Vapor
    

### **Stage 4: Feature Parity**

In its initial release, Vapor Mode will provide only the essential core features while some of the more auxiliary features like `<Transition />`, `<KeepAlive />` , `<Teleport />`, `Suspense` will be implemented after the Vue team has sorted out all of the previous goals.

## In Summary

* **Vapor Mode is a new performance-oriented compilation strategy** being developed by Vue.js
    
* **It will use the same template** (assuming you're using the Composition API and `<script setup>` and produce a more performant output.
    
* **It will be incrementally adoptable** - You will be able to choose to enable Vapor Mode either for individual components or for the entire app.
    
* **The end goal is to freely mix Vapor and non-Vapor components** within the same app without issues, however, Vapor Mode may begin with a vapor-only tree integrated into the vDOM, and then improve the interoperability between them from there on.
    

### **Thank you for reading this blog!** 😄

If you would like to see more new Vue 3-related content, follow me here and on Twitter as.

### Content used for this blog

[**The Vue Point - 2022 Year in Review**](https://blog.vuejs.org/posts/2022-year-in-review)  
Jan 1, 2023

[**Vue: What to Expect in 2023 by Evan You**](https://youtu.be/OrT0tHGXyqE&t=1250) - Vue.js Nation 2023  
Feb 1, 2023

[**State of Vuenion 2023**](https://youtu.be/I5mGNB-4f0o&t=1219) - Vuejs Amsterdam 2023  
Mar 1, 2023

[**Vue Mastermind Evan You answers Vue devs' questions**](https://youtu.be/BqHzQcFwk0I&t=899) - [Vue Mastery](https://vuemastery.com/)  
Jun 22, 2023

[**State of Vuenion 2023**](https://youtu.be/y-hN5Q_lb9A&t=1328) VueConf US 2023  
Jul 11, 2023