Deux librairies incroyables pour Vue 3
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.
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 :
On va maintenant suivre la documentation est faire un premier npm install.
npm i -D unplugin-auto-importDans 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.
A présent dans mon component TheWelcome, je peux utiliser ref sans l’import
Je vais supprimer aussi les import de vue-router dans mon app.vue
Et ça fonctionne :D
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 -DOn retourne dans vite.config.js et on ajoute notre plugin dans vite.
J’ai supprimé l’import de component dans App.vue
Et cela fonctionne parfaitement !
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/