Qu'est-ce que Vue.js ?

Qu'est-ce que Vue.js ?

Vue.js est un framework JavaScript open source pour construire des interfaces utilisateur. Il s'appuie sur HTML, CSS et JavaScript standards et propose un modèle déclaratif à base de composants : vous décrivez l'apparence de la page pour un état donné, et Vue met à jour le DOM quand cet état change. La version majeure actuelle est Vue 3.

Comment fonctionne Vue

Vue enrichit HTML d'une syntaxe de gabarits et suit l'état réactif lu par votre gabarit. Quand une valeur change, seul ce qui en dépend est rendu à nouveau. Les composants s'écrivent le plus souvent en composants monofichiers (fichiers .vue) qui regroupent logique, gabarit et styles. Avec une étape de build, c'est la méthode recommandée par la documentation de Vue. Un composant Vue 3 en style Composition API ressemble à ceci :

<script setup> import { ref } from 'vue'; const count = ref(0) </script> <template><button @click="count++">Compteur : {{ count }}</button></template>

Options API et Composition API

Vue propose deux styles d'écriture sur le même socle. L'Options API est construite au-dessus de la Composition API.

• Options API : la logique est répartie en options comme data, methods et mounted. Elle est plus accessible aux débutants.
• Composition API : l'état et les fonctions sont déclarés directement, en général avec <script setup>. Elle est plus libre et convient aux applications complètes et à la logique réutilisable.

La documentation de Vue conseille l'Options API pour les cas simples en amélioration progressive, et la Composition API avec des composants monofichiers pour les applications complètes.

Où Vue est utilisé

Vue se présente comme un framework progressif : on l'adopte étape par étape. La documentation cite ces usages :

• Enrichir du HTML statique sans étape de build.
• L'intégrer comme composants web dans n'importe quelle page.
• Une application monopage (SPA) côté client construite avec Vite.
• Du rendu côté serveur (SSR) en fullstack, que le navigateur hydrate ensuite. Nuxt est le méta-framework habituel pour cela.
• La génération de sites statiques (Jamstack).

Vue 2 a atteint sa fin de vie

D'après vuejs.org, Vue 2 a atteint sa fin de vie le 31 décembre 2023. La version 2.7 fut sa dernière version mineure. Si vous utilisez encore Vue 2, prévoyez la migration vers Vue 3 ; le site de Vue mentionne un Extended LTS proposé par un tiers comme solution transitoire.

Erreurs fréquentes

• Modifier une prop dans le composant enfant au lieu d'émettre un événement vers le parent.
• Oublier .value sur une ref dans <script setup>, alors que les gabarits la déballent automatiquement.
• Livrer une SPA purement client en ignorant le premier chargement : un gros bundle JavaScript retarde ce que voit l'utilisateur.
• Afficher de très longues listes sans limiter ce qui est dans le DOM.
• Mélanger des tutoriels Vue 2 et du code Vue 3.

Vue et les tests de performance

Un test de charge envoie du trafic à vos serveurs et API ; il n'exécute pas votre code Vue et ne montre donc ni rendu lent ni bundle lourd. Mesurez cela dans un vrai navigateur : le vérificateur Core Web Vitals gratuit donne les données terrain d'une URL, et la surveillance de la vitesse de page lance des audits Lighthouse planifiés avec alertes. Pour aller plus loin, nos guides (en anglais) sur la performance JavaScript et les tests de performance frontend.

Questions fréquentes

Vue.js est-il un framework ou une bibliothèque ?

La documentation de Vue parle de framework. Le cœur se concentre sur la couche vue ; le routage et la gestion d'état viennent de bibliothèques complémentaires que vous ajoutez au besoin.

Vue 2 est-il encore pris en charge ?

Non. Vue 2 a atteint sa fin de vie le 31 décembre 2023. Les nouveaux projets doivent utiliser Vue 3.

Options API ou Composition API ?

Les deux fonctionnent, car elles reposent sur le même socle. La documentation recommande la Composition API avec des composants monofichiers pour les applications complètes.

Vue peut-il rendre côté serveur ?

Oui. Vue prend en charge le rendu côté serveur et la génération de sites statiques, et Nuxt construit un framework d'application complet par-dessus.