Tutoriel VueJS : Vue.js 3.2

Dans cette vidéo je vous propose de découvrir les nouveautés de Vue 3.2.

Du nouveau pour les .vue

Cette version 3.2 vient stabiliser 2 éléments de syntaxe disponible dans les fichier .vue.

script setup

Pour commencer <script setup> permet d'utiliser l'API composition beaucoup plus simplement que par le passé.

<template>
  <div>
    <p>Compteur {{ suffix }} : {{ count }} x 2 = {{ double }}</p>
    <button @click="handleClick">Incrémenter</button>
  </div>
</template>
<script setup>
  import { ref, computed } from "vue";
  // Un composant peut être importé directement
  import Button from "../components/Button.vue";

  const count = ref(0);

  // Les props sont définit via defineProps() et renvoie la valeur des props
  const props = defineProps({
    suffix: String,
  });

  // si on souhaite émettre un évènement, on peut utiliser defineEmits()
  const emit = defineEmits(["increment"]);

  // Toutes les variables sont exposées à la vue
  const double = computed(() => count.value * 2);

  function handleClick() {
    count.value++;
    emit("increment", count.value);
  }
</script>

Même si cette syntaxe est stabilisée, l'équipe Vue.js continue à travailler sur la simplification de l'utilisation des refs dans les composants .vue.

style v-bind

Un autre ajout est la possibilité d'utiliser une propriété de notre composant dans la partie CSS.

<script setup>
  import { ref } from "vue";

  const color = ref("red");
</script>

<template>
  <div>
    <input v-model="color" />
  </div>
</template>

<style scoped>
  input {
    border: solid 1px v-bind(color);
    color: v-bind(color);
  }
</style>

Lors de la compilation, vue.js utilisera une variable CSS qui sera injectée sur l'élément racine du composant.

Les composants web

Il est maintenant possible de créer des composants web à l'aide de la méthode defineCustomElement().

import { defineCustomElement } from "vue";

const MyVueElement = defineCustomElement({
  // Les options classiques d'un composant vue vont ici
});

// On peut ensuite enregistrer notre composant
customElements.define("my-vue-element", MyVueElement);

Il est aussi possible d'utiliser un fichier .vue qu'il faudra suffixer par .ce.vue.

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

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