Aller au contenu
CivilisationIT

Deux librairies incroyables pour Vue 3

Killian STEIN
Killian STEIN
Ingénieur DevSecOps

Des librairies gain de temps pour VueJS

En utilisant VueJS dans son état le plus pur possible, il nous arrive d’importer plusieurs fois des fonctions/méthodes, ici je veux parler de Ref, Watch, onMouted ou encore d’autre comme route et router de vue-router.

img post.png

Si vous avez déjà utilisé des frameworks comme Nuxt, vous avez remarqué que vous n’avez pas besoin de cela, même pour les components, de l’auto import qui nous rend plus efficaces et rend le code plus propre.

Cependant, tous les frameworks ne sont pas doté de cette technologie, ni Vue dans son état brute. Dans cet article de blog je vais donc vous montrer comment y remédier 🙂 Il suffit de 2 librairies très puissantes qui vont faire gagner beaucoup de lignes de code.

Librairie pour l’auto import des fonctions :

https://www.npmjs.com/package/unplugin-auto-import/v/0.17.1

Librairie pour l’auto import de component :

https://www.npmjs.com/package/unplugin-vue-components/v/0.14.0-beta.1

Pour commencer je vais créer un projet Vue avec vite :

Need to install the following packages.png

On va maintenant suivre la documentation est faire un premier npm install.

npm i -D unplugin-auto-import

Dans le fichier vite.config.js nous allons ajouter l’import et indiquer le plugin pour qu’il soit chargé au build de l’application. Ensuite, en suivant la documentation, nous allons pré importer des librairies dans un tableau.

CleanShot 2024-08-19 at 21.45.19@2x.png

A présent dans mon component TheWelcome, je peux utiliser ref sans l’import

CleanShot 2024-08-19 at 21.46.52@2x.png

CleanShot 2024-08-19 at 21.47.46@2x.png

Je vais supprimer aussi les import de vue-router dans mon app.vue

CleanShot 2024-08-19 at 21.48.48@2x.png

Et ça fonctionne :D

CleanShot 2024-08-19 at 21.49.59.gif

Maintenant on va supprimer toutes la partie script setup, avec unplugin-vue-components , fini l’import de component !

Un petit npm install

npm i unplugin-vue-components -D

On retourne dans vite.config.js et on ajoute notre plugin dans vite.

CleanShot 2024-08-19 at 21.55.55@2x.png

J’ai supprimé l’import de component dans App.vue

CleanShot 2024-08-19 at 21.56.55@2x.png

Et cela fonctionne parfaitement !

CleanShot 2024-08-19 at 21.58.40@2x.png

J’espère que ces librairies vous plairont mais aussi qu’elles vous seront utiles 😁

Pour finir, n’hésitez pas à me rejoindre sur les réseaux sociaux pour plus de contenu !

Youtube ➡️ https://www.youtube.com/@civilisationit

X(Ancien Twitter) ➡️ https://x.com/Ninapepite_

LinkedIn ➡️ https://www.linkedin.com/in/killian-stein-4465b81a2/

Étiquettes :