Étiquette : Vue

[Vue.js] Accès à un élément de la DOM d’un composant enfant

[Vue.js] Accès à un élément de la DOM d’un composant enfant

Si vous développez avec Vue.js, vous avez peut-être eu, à un moment donné, besoin d’accéder à un élément de la DOM dans un composant enfant. En général, pour permettre la communication entre des composants parent et enfant, on utilise plutôt la liaison « double-sens » – ou 2-ways binding en anglais – à l’aide de la directive v-model ou bien encore des événements.

Cependant la méthode du 2-ways binding permet surtout de synchroniser des valeurs et de les garder à jour lorsque le parent doit y accéder. Ici, on aimerait pouvoir manipuler un élément de la DOM directement.

Vue.js: accès à un élément de la DOM d'un composant enfant

Poursuivre la lecture « [Vue.js] Accès à un élément de la DOM d’un composant enfant »

[Vue.JS] Validation de formulaires avec Yup

[Vue.JS] Validation de formulaires avec Yup

Yup permet de construire des schémas pour l’analyse et la validation des valeurs d’un formulaire à l’exécution. Il peut notamment être utilisé dans une application Vue en combinaison avec le plugin vee-validate. La librairie est extensible et vous pouvez également y ajouter vos propres méthodes. Et cerise sur le gâteau : TypeScript est géré ! Voyons comment ajouter un schéma de validation à nos formulaires.

Poursuivre la lecture « [Vue.JS] Validation de formulaires avec Yup »

[Vue.JS] Créer un store avec Pinia

[Vue.JS] Créer un store avec Pinia

Pinia remplace vuex pour la création de stores. Ceux-ci permettent de gérer et persister l’état de différents objets afin qu’ils soient accessibles depuis n’importe quel composant de votre application. Dans ce petit tutoriel nous allons voir comment installer Pinia, créer un premier store et l’utiliser dans nos composants Vue.JS. Notez que pour cela nous avons utilisé Vue 3 et TypeScript.

Pinia store Vue.JS

Poursuivre la lecture « [Vue.JS] Créer un store avec Pinia »