VueJS video tutorial: Vue.js 3.2

In this video I invite you to discover the new features of Vue 3.2.

New for .vue

This version 3.2 stabilizes 2 syntax elements available in the files .seen.

script setup

To start

Even if this syntax is stabilized, the Vue.js team continues to work on simplifying the use of refs in components. .seen.

v-bind style

Another addition is the possibility to use a property of our component in the CSS part.

During compilation, vue.js will use a CSS variable which will be injected on the root element of the component.

The web components

It is now possible to create web components using the method defineCustomElement ().

import {defineCustomElement} from "vue";

const MyVueElement = defineCustomElement ({
  // The classic options of a view component go here
});

// We can then save our component
customElements.define ("my-vue-element", MyVueElement);

It is also possible to use a file .seen which will have to be suffixed by .this.view.

import {defineCustomElement} from "vue";
import MyVueComponent from "../components/MyVueComponent.ce.vue";

customElements.define ("my-vue-element", defineCustomElement (MyVueComponent));