📖​ Introduction

Vue.js (ou Vue pour faire plus court 🙂) est un framework et un écosystème qui couvre la plupart des fonctionnalités courantes nécessaires au développement front-end.

Vue est un peu comme un mélange entre React et Angular.Il est souvent perçu comme plus facile à appréhender au premier abord qu’Angular, et plus guidé que React,  ce qui aide à ne pas se perdre. Vue permet de créer des sites dynamiques rapidement, sans avoir besoin de tout apprendre d’un coup.

Par rapport aux autres :

• Vue est simple, clair, et rapide à utiliser.
• React est très puissant, mais demande de faire plus de choix soi-même.
• Angular est très complet, mais peut être plus compliqué à apprendre au début.

Pour résumer, Vue est un bon compromis entre simplicité et puissance.

Dans cet article, nous verrons comment mettre en place un projet Vue de façon simple en 2025 en utilisant les librairies recommandées pour couvrir vos premiers use cases.

​⚙️​ Prérequis

Pour commencer, Vue nécessite l’installation de Node.JS pour fonctionner, l’installeur est disponible sur son site officiel (https://nodejs.org/en/download).

Cependant, je vous conseille de ne pas l’installer tel quel, en effet si vous êtes amené à travailler sur plusieurs projets et qu’ils n’utilisent pas les même version de Node, vous serez embêté pour passer d’une version à une autre sans perdre quelques neurones 🤕​.

Je vous recommande d’utiliser NVM (Node Version Manager, https://github.com/nvm-sh/nvm), un outil vous permettant de gérer plusieurs versions de Node.js sur un même ordinateur.

Une fois NVM installé, il est possible d’installer la version Node souhaitée avec la commande nvm install [version]. Si elle est déjà installée, vous pouvez passer dessus avec un node use [version].

Tips : Il est possible de mettre à la racine de votre projet un fichier .nvmrc contenant la version Node voulue, lorsque vous basculez de nouveau sur ce projet, faites un nvm use (sans le numéro de version).

Bien évidemment que nous n’allons pas développer notre projet avec Vi dans un terminal tristounet ​🤓​, pour cela je vous recommande VSCode avec les plugins suivant :

• Vetur : l’extension principale pour la coloration, l’autocomplétion et le formatage des fichiers Vue.
• ESLint : pour détecter et corriger les erreurs de code.
• Prettier : pour formater automatiquement ton code proprement.

Maintenant que vous avez mis votre maillot de bain et votre bonnet, c’est parti pour le grand bain ! ​🏊​

🚀​ Mise en place d’un projet Vue

Maintenant que notre environnement est prêt, nous allons lancer la commande npm create vue@latest pour créer notre base :

Trop de questions ? Vous ne savez pas quoi choisir ? Pas de panique, je suis là pour vous expliquer tout ça ! 🧑‍🎓​

📦​ Outils de gestion des package

NPM et Yarn sont les 2 outils de gestion de packages les plus utilisés. Ils ont le même rôle, mais il existe quelques différences :

• NPM est fourni automatiquement avec Node.js, c’est l’outil “officiel”.
• Yarn créé par Facebook pour pallier les limites de npm, Yarn est désormais un projet indépendant, dont la version 4 incarne une réécriture moderne pilotée par Maël Nison, ingénieur chez Datadog et principal mainteneur depuis Yarn 2

Les raisons d’utiliser Yarn sont historiques, aujourd’hui, NPM a rattrapé son retard et il n’existe quasi plus de différences entre les 2 outils.

Pour notre besoin, nous utiliserons NPM (déjà présent).

✒️​ TypeScript ou JavaScript ?

Nous allons choisir avec quel langage développer notre application : 

• JavaScript est le langage de base du web, souple mais sans vérification de types.
• TypeScript est une version améliorée de JavaScript, avec un typage fort (comme string, number, etc.) pour détecter les erreurs plus tôt.

TypeScript est recommandé dans la plupart des cas professionnels, d’une part car il rend le code plus robuste, plus lisible, et limite les erreurs, et d’autre part car il bénéficie d’une communauté large et bien établie. Nous partirons donc sur du TypeScript.

​💻​ Support JSX

JSX est une extension de JavaScript qui permet d’écrire du HTML directement dans ton code JavaScript. C’est très utilisé avec React, car cela permet de créer des interfaces visuelles de façon plus naturelle.

Exemple : const element = <h1>Hello, monde !</h1>;

JSX est optionnel dans Vue. Il peut être utile dans des cas spécifiques, mais pour la majorité des projets, les templates classiques (<template> … </template>) suffisent largement.

Nous le laisserons désactivé.

🛣️​ Gestion des routes

Vue permet de faire du rendu côté client ou du rendu côté serveur, avec pour chacun des avantages et des inconvénients :

• Avec le routage côté client (client-side routing), l’application change de page sans recharger toute la page web. Ça rend la navigation plus rapide et fluide.
• Avec le routage côté serveur (server-side routing), chaque changement de page demande au serveur une nouvelle page complète.

Il existe des solutions comme Nuxt.js qui combinent les deux pour profiter des avantages de chacun.

Aujourd’hui, le routage côté client (client-side routing) est largement le plus utilisé dans le développement d’applications modernes avec Vue. Nous allons donc ajouter le routeur recommandé par Vue.

🏪​ Gestion de l’état de l’application

Techniquement, chaque composant Vue possède son propre état, il est par exemple possible de mettre un compteur dans un composant et s’en servir dans le template.

Cependant, cela devient très vite compliqué à maintenir lorsque l’application commence à manipuler une multitude de données.

Il nous faut donc passer sur une solution de state management plus poussée afin de pouvoir centraliser les données et les rendre accessibles depuis n’importe quels composants ce qui nous permettra d’avoir aussi un code plus simple à maintenir et à déboguer.

Pour celà 2 choix s’offrent à nous :

• La solution simple : Créer un objet réactif simple grâce à reactive() de Vue
• La solution plus complexe : Utiliser une librairie plus poussée comme Pinia 🍍​(successeur de Vuex, fortement conseillé par les ingénieurs de Vue)

La solution simple fonctionnerait pour une application simple 🙂, ce qui est rarement le cas pour un projet professionnel. Nous partirons donc sur l’ajout de Pinia.

🔬​ Outils de tests

Normalement, quand nous écrivons du code, il peut y avoir des bugs. Les tests permettent de vérifier automatiquement que tout fonctionne. Lors de la création du projet, Vue nous propose d’installer une dépendance pour les tests unitaire (Vitest) et une dépendance pour les tests end-to-end parmis les possibilités suivantes:

• Cypress: permet de tester facilement des applications web dans un navigateur avec une interface visuelle conviviale.
• Nightwatch : framework de test basé sur Selenium, adapté aux projets existants ou aux environnements multi-navigateurs avec une configuration classique.
• Playwright : tester des applications web sur plusieurs navigateurs, idéale pour des scénarios complexes et des projets exigeants.

Cypress a longtemps été apprécié pour sa simplicité et sa large communauté, mais aujourd’hui, Playwright est souvent préféré car il prend en charge tous les navigateurs, permet des tests plus rapides et plus complets, et facilite l’exécution en parallèle.

Sa communauté est en pleine croissance, avec plus de 70 000 étoiles sur GitHub et des téléchargements hebdomadaires en forte hausse, dépassant même ceux de Cypress depuis 2024.

Nous partirons donc sur Playwright.

🧹​ Outils de qualité de code

Vue propose directement d’installer des outils de qualité de code, nous aidant à maintenir un code propre, lisible, et maintenable.

Il existe deux outils : 

• ESLint: permet d’analyser le code et signaler des erreurs afin d’écrire du code cohérent et sans erreur de syntaxe.
• Prettier: permet de formater automatiquement le code (indentation, espaces, virgules…) 

Nous allons les installer, il y a de fortes chances qu’ils soient installés sur vos futurs projets professionnels !

🏃​ Lancer le projet en local

Maintenant que le projet est créé, il faut le démarrer ! Faites un cd [nom du projet], puis npm install et enfin npm run dev. L’application devrait être disponible à l’adresse http://localhost:5173 .

🌷 Comment pimper un projet ?

📡 Comment récupérer des données ?

Parfois, on veut aller chercher des données sur internet pour les montrer dans notre application Vue. Plusieurs librairies existent pour répondre à ce besoin :

• Fetch : Inclus dans tous les navigateurs modernes, ne requiert pas d’installation
• Axios : Lib externe la plus utilisée, simple à utiliser, bonne gestion des erreurs
• Vue Query : Gestionnaire de données (cache, refetch, pagination…), utilise Axios ou Fetch en interne, parfait pour Vue 3 + Composition API

Vue Query semblerait correspondre parfaitement a notre besoin, cependant Axios est plus simple à mettre en place et à maîtriser. Nous partirons donc sur ce dernier.

🧵​​Comment styliser son application ?

Il est possible de styliser son application de plusieurs façons, en faisant tout à la main (pour les warriors 🦾​), en utilisant une librairie de style ou une librairie de composants.

🧞​​ Avec une librairie de composants

Avec Vue, les librairies de composants jouent un rôle essentiel en fournissant des éléments d’interface utilisateur préconçus et réutilisables. Elles permettent d’accélérer le développement tout en garantissant une cohérence visuelle et fonctionnelle à travers l’application.

Exemples de librairies populaires en 2025:

• Vuetify : implémente Material Design avec une large gamme de composants avancés.
• Element Plus : orientée vers les applications professionnelles avec une interface épurée.
• Naive UI : moderne et légère, offrant une grande flexibilité pour la personnalisation et bien intégré avec Vue 3.
• Quasar : un framework complet qui inclut à la fois des composants et un système de build.
• PrimeVue : riche en composants variés, adaptés à de nombreux cas d’usage.

Ici, nous choisirons la librairie Vuetify, la plus ancienne, la plus connue et celle ayant la plus grande communauté.

🎨​ Avec une librairie de style

Une alternative aux librairies de composants est d’utiliser une librairie de style :

• Tailwind CSS : La plus populaire, très personnalisable.
• Windi CSS ou UnoCSS : Génération à la volée (observe les classes utilisées dans le code source et ne génère uniquement le style utilisé), ultra rapide.

​🐞  Comment débugger une application ? 

Le débogage est un processus d’analyse qui consiste à isoler une anomalie.

 Quand notre projet ne fonctionne pas correctement, pas de panique ! Il existe des outils pour chercher et réparer les erreurs, un peu comme un détective 🕵️‍♂️. Comme les DevTools, les logs ou les breakpoints.

Cependant, je vous conseille d’utiliser Devtools pour debugger sur le navigateur, cet outil permet de gagner du temps, de repérer plus facilement les erreurs, et de développer plus efficacement.

🛠️ Étapes simples pour installer Vue Devtools :

Les navigateurs modernes proposent un outil générique intégré pour permettre d’inspecter et de débugger tout type de site web. Vue Devtools permet d’inspecter, comprendre et modifier facilement la structure et l’état des composants Vue, rendant le débogage et le développement beaucoup plus simples et efficaces.

💡 Tips : Vue Devtools ne s’active que si notre app Vue est en mode développement, dans le cas ou cela ne fonctionne pas, il faut vérifier la présence du paramètre “__VUE_DEV_DEVTOOLS__: true”  dans le fichier vite.config.js.

🧩 Conclusion:

En 2025, Vue.js reste une solution moderne, flexible et accessible pour développer des applications front-end performantes. Grâce à un écosystème riche et bien structuré, il est facile de démarrer rapidement un projet solide en combinant des outils éprouvés : Node.js avec NVM pour gérer l’environnement, TypeScript pour un code robuste, Vue Router pour la navigation, Pinia pour la gestion d’état, et Playwright pour les tests.

Pour l’interface utilisateur, Vuetify s’impose comme la librairie de composants la plus complète et populaire, tandis qu’Axios facilite la récupération de données. Enfin, des outils comme ESLint, Prettier et Vue Devtools permettent de maintenir un code propre et de déboguer efficacement.

Avec cette base, vous disposez d’un starter performant et prêt à évoluer, qui vous accompagnera dans la création d’applications Vue.js modernes, maintenables et agréables à développer.