Pourquoi passer à la version 3 de Vue.js?

On le sait, il n’est pas facile de mettre à jour l’architecture technologique de certains projets. Malgré tout, c’est souvent une étape essentielle pour rester à jour avec les nouveautés disponibles dans le domaine et améliorer l’expérience autant utilisateur que développeur. Si vous utilisez Vue.js, c’est à votre tour de faire le saut : Vue 2 arrêtera de faire des mises à jour de sécurité le 31 décembre 2023! 

Qu'est-ce que Vue 3?

L’infrastructure logicielle (framework) Vue 3 a été réécrite à partir de zéro pour obtenir de meilleures performances ainsi qu'un meilleur support de TypeScript, et tout ça pour un poids final plus petit que sa version précédente. Assez impressionnante, cette nouvelle version nous offre des outils pour livrer des projets de meilleure qualité à la fine pointe de la technologie. 

Un résumé des améliorations dans la version 3 de Vue.js

1. Composition API

La composition API change la donne en matière d’organisation et de réutilisation de certains aspects du code. Cette fonctionnalité permet d’extraire la logique des composants et de la réutiliser au travers de plusieurs composants. Cela améliore la lisibilité ainsi que la maintenance du code. En plus, grâce à sa syntaxe déclarative, elle permet au système réactif de Vue d’offrir un meilleur suivi des changements ainsi qu’une mise à jour des états. Le résultat est un code mieux organisé, plus facile à maintenir et plus performant.

2. Portails

Le support natif du principes des portails, nommé Teleport, est très pratique pour des éléments comme les modèles, les dialogues, les superpositions (overlay), les alertes, etc. C’est un composant natif qui permet de téléporter une partie du code dans un nœud du DOM qui existe en dehors de la hiérarchie.

3. Fragments

Élément virtuel qui ne sera pas rendu dans le DOM, c’est très pratique pour un rendu HTML plus propre donc, fini les balises inutiles autour de nos composants.

4. TypeScript

La version 3 de Vue.js offre également un support grandement amélioré de TypeScript, un langage de programmation très populaire dans le domaine pour bâtir des projets plus solides grâce à une base de code typée. C’est un langage plus rigide que JavaScript. Il permet d’identifier les problèmes en amont. Il permet aussi une meilleure sécurité et maintenance du code ainsi qu’une meilleure documentation. Avec la nouvelle version, il est maintenant très facile d’utiliser cette technologie dans Vue.

5. Suspense

Suspense est un composant spécial pour afficher du contenu de rechange jusqu’à ce que la condition soit remplie. C’est surtout utilisé pour afficher du faux contenu ou une barre de chargement dans les temps de latence. Un élément essentiel pour une bonne expérience utilisateur.

6. Variables CSS

L’implémentation des variables CSS influencée par les états permet de changer visuellement certains aspects de l’interface utilisateur par rapport au changements des états. Une fonctionnalité que les développeurs vont bien aimer, elle ouvre les portes à plusieurs possibilités pour la gestion du CSS.

La fin de Vue 2 approche

Il n’est pas encore urgent de passer à la nouvelle version, mais vous devriez commencer à y réfléchir sérieusement. Vue 3 a été officiellement lancée le 18 septembre 2020 et considérée comme la version par défaut depuis le 7 février 2022. 

Vue 2 arrivera en « fin de vie / End-of-Life (EoL) » le 31 décembre 2023. C’est une date à mettre dans le calendrier, car les mises à jour de sécurité vont arrêter à partir de ce moment. Pour une transition sans tracas, commencez dès maintenant vos préparatifs. Vous pouvez avoir plus d’informations sur la fin de Vue 2 sur le site de Vue.js.

L'écosystème Vue

Lorsque nous avons une mise à jour majeure technologique, c’est l’écosystème au complet qui doit se mettre à jour. Dans le cas de Vue, la communauté a réagit assez rapidement et plusieurs librairies étaient déjà prêtes à offrir des mise à jour de leur outil pour supporter la nouvelle version de Vue.

Nuxt 3

Nuxt est un outil très puissant qui offre des conventions solides, un rendu serveur pour un meilleur SEO et plusieurs autres fonctionnalités.

Voici quelques fonctionnalités en rafales :

1. Nouveau moteur de serveur (Nitro)
2. Zéro configuration
3. Routage du système de fichiers
4. Modes de rendu
5. Récupération des données 
6. Fortes conventions
7. Amélioration de l’optimisation pour les moteurs de recherche (SEO)
8. Importation automatique de composants
9. Écosystème de modules

Bref, il est temps de passer à Vue 3!

La version 3 de Vue.js vous donne accès à de nouvelles fonctionnalités très intéressantes dans le but de bâtir des projets plus performants et modernes. C’est un écosystème complet qui est en transitions. Si votre site utilise Vue 2, il sera important de commencer à analyser le travail nécessaire pour faire la transition. N’oubliez pas que Vue 2 arrêtera de faire des mises à jour de sécurité le 31 décembre 2023! Dépêchez-vous de passer à Vue 3 et discutez avec un expert.