Depuis le 31 décembre 2023, la version 2 Vue.js n’est plus maintenue… y compris pour les failles de sécurité !

Le développement de nouvelles fonctionnalités s’était déjà arrêté en 2022 avec la version 2.7.

Si vous êtes encore sous cette version, il est temps d’envisager une migration vers Vue 3 et de profiter des nombreux avantages qu’offre cette version du framework.

On fait le point. 

Quels sont les avantages et nouveautés de Vue.js 3 ? 

Vue.js 3 apporte son lot de nouveautés et d’améliorations : 

• Une meilleure performance : Tout d’abord, il utilise une nouvelle version de DOM virtuel plus rapide, agissant comme le moteur central de l’affichage de votre site. En parallèle, il élimine les parties inutiles du code pour ne conserver que ce qui est nécessaire, réduisant ainsi la taille de l’application et accélérant son chargement.
• Un framework plus léger : La taille du code est diminuée de 40% par rapport à Vue 2. Cela favorise ainsi un chargement plus rapide, améliorant ainsi l’expérience utilisateur et le référencement naturel. 
• Un framework plus réactif : Le système de réactivité de Vue 3, responsable de la manière dont l’application répond et se met à jour en fonction des changements de données, a également été optimisé. Cela se traduit par une réactivité accrue de votre site aux actions des utilisateurs, offrant une expérience plus fluide et plus rapide. 
• Une intégration de TypeScript : Bien que la version 2 supportait Typescript, la version 3 a été conçu dès le début avec TypeScript. 
• Des mises à jour régulières et correctifs de sécurité : La communauté active autour de Vue.js, ainsi que l’équipe de maintien principale, s’engagent à fournir des mises à jour régulières et à corriger rapidement les vulnérabilités de sécurité identifiées (ce qui n’est plus le cas avec Vue 2). Cela garantit que les utilisateurs peuvent bénéficier des dernières corrections de sécurité et des meilleures pratiques en matière de développement sécurisé.

Les prérequis 

Avant toute chose…

Il est utile de préciser, que suite à l’arrivée de la nouvelle version majeure de Vue, de nombreuses applications restent pour le moment en Vue 2 n’ayant pas forcément les ressources ou les librairies adaptées pour effectuer leurs migrations.

C’est pourquoi, Vue à décider de backporter certaines features de la 3.0 dans la dernière version mineure 2.7. 
Cette dernière version permet d’intégrer l’écriture en composition API, ainsi que de nouvelles syntaxes tout en conservant le core de Vue 2.

Cela permet de faciliter à terme la migration vers la 3.0 en minimisant l’impact. 

 

Clean code 

Dans un premier temps, profitez de cette étape pour nettoyer le code de votre application de tout reliquat qui n’avait pas été retiré auparavant. Repartir sur une base saine vous fera gagner du temps pour la suite !

 

Besoin d’aide ?

Vue met à disposition un outil pouvant nous aider dans notre migration : @vue/compact. Il suffit de l’ajouter à notre package.json via un simple npm install. Ce dernier nous renverra divers types d’alertes pour nous guider dans notre debuggage.

 

Le compilateur VITE 

Avec l’arrivée de Vue 3, il est recommandé d’utiliser le compilateur VITE à la place de vue-cli. Ce nouveau compilateur est plus performant que son prédécesseur et nous facilite le travail. 

Parmi les avantages de VITE : 

• Un build beaucoup plus rapide ; 
• Plus besoin de webpack ou autres pré-processeurs, VITE les intègres déjà ; 
• Plus économe en ressources car il ne charge que ce dont il a besoin ; 
• Le rechargement automatique durant les phases de dev est quasiment instantané ; 
• Supporte Typescript nativement, possible d’installer le plugin vite-plugin-checker à l’instar de vue-tsc.

 

À cela, quelques modifications sont à prévoir, notamment sur l’utilisation des variables d’environnement. Il suffit de remplacer le suffixe « VUE_APP_ » par « VITE_« . dans vos .env. Aussi, l’import dans le code se fera via « import.meta.env.VITE_MYVAR« 

 

Vous avez dit PINIA ? 

Si vous ne le connaissiez pas encore, ça ne saurait tarder ! En effet, vous avez déjà sûrement utilisé le gestionnaire d’état ou plus communément le « STORE » de Vue, qui n’est autre que VueX, mais il en existe d’autres. 

 

PINIA est désormais maintenu par la communauté de Vue et devient celui recommandé pour les applications sous Vue. 
Il se révèle être plus performant et plus simple d’utilisation pour des applications moyennes ou complexes. 

 

Si vous souhaitez quitter VueX pour PINIA, il faudra prévoir un réel effort de migration, surtout si le store déjà en place est relativement important et bien construit.

 

Cependant, il nous est toujours possible de conserver VueX est de procéder à une migration plus tard. En revanche, VueX ne dispose plus de nouvelles features, reste en maintenance pour le moment et est voué à disparaître.

 

Parmi les bénéfices de PINIA : 

• Décentralisé, on pourra désormais parler de STORES ; 
• Il supporte l’écriture en composition API et en options (à vous de choisir) ; 
• Ses variables sont réactives, il ne reste qu’à les manipuler directement ; 
• Il s’intègre également dans le VueDevTools. 
   

Comment se déroule une migration ?

Pour ce guide pratique, nous nous sommes basés sur le passage d’une application interne dédiée aux ressources humaines développée en Vue 2.6 avec un backend Java Spring.

PINIA 

• Architecture du répertoire remis à plat (1 seul niveau) plutôt que sous formes de nested-module. De ce fait chaque namespace devient maintenant un store possédant un id. 
• Dans chaque store nous ne parlerons plus de mutations mais conserverons les thermes : state, actions, getters (options API) 
• L’appel du store dans un composant est simplifié par : useMyCustomStore() 
• La réécriture du store en composition API simplifie la lecture et la conception du code. 

 

En parlant de composition…

Depuis Vue 2.7, il nous est possible d’écrire en composition API. Cette dernière est plus lisible et simple dans sa compréhension. Déclarations de fonctions à la place du déclaratif comme un script JS standard.

 

Vue recommande par défaut d’utiliser l’écriture en composition API si cela est possible, car elle rend le code plus flexible et plus simple à faire évoluer. En revanche, il n’y a pas de contre-indications à continuer à utiliser l’option API, elle n’est pas amenée à disparaître. Certains préféreront continuer avec cette écriture qui est plus restrictive et permet de moins se préoccuper de l’organisation de son code.

 

Il est également possible de faire cohabiter les 2 écritures dans un même projet en utilisant la méthode setup() pour l’option API. Cependant, il est conseillé d’uniformiser sa code base en n’ayant qu’une seule écriture.

 

Comparaison Options / Composition API : 

Exemple d’un fichier en composition :

 

Ensuite, viennent vos différentes librairies et dépendances installées dans votre application. Voici les plus courantes :

i18n 

L’utilisation de la librairie de traduction i18n est relativement simple à migrer. Pas de piège. 

 

Désormais, il nous suffit d’appeler useI18n() dans nos composants concernés pour utiliser nos traductions.

 

 

Vuetify 

Vuetify continue de poursuivre sa migration vers les nouvelles modifications amenées avec Vue 3. 
Malheureusement encore certains composants restent en vuetify labs… Cela signifie que ces composants continuent d’exister et peuvent être intégrés dans vos applications, mais sont susceptibles d’évoluer, car ils ne sont pas encore définitifs.

 

Volar 

Actuellement, le plugin recommandé pour VScode pour le développement sous Vue 2 était Vetur. Désormais, ce dernier est marqué en deprecated. 

Vue recommande l’utilisation de Volar. Il fournit la mise en surbrillance syntaxique d’éléments de code, un support typescript, et l’autocomplétion pour divers éléments de composant, props… 
 

Prêt ? Testez !

Avec l’installation de VITE, nous pouvons également migrer nos tests de Jest vers VITEST. La migration est simplifiée, étant donné que les deux librairies partagent quasiment la même syntaxe.

 

En revanche, suivant l’importance de vos tests dans votre application, un gros effort est à prévoir étant donné que bons nombres de vos composants ont été modifiés au cours de cette migration et pourraient ne plus passer vos précédents tests. Cependant, il vous est tout à fait possible de conserver vos tests sous Jest ou de faire cohabiter les deux librairies pendant un certain temps.

 

VITEST possède de nombreux avantages. Il est plus rapide à l’exécution, plus simple à configurer étant donné qu’il partage la configuration de VITE. Aussi, il bénéficie des dernières nouveautés Javascript et intègre Typescript nativement. 

 

Pourquoi planifier sa migration avec Elosi ? 

La transition entre Vue 2 et Vue 3 est une étape cruciale qui nécessite une maîtrise technique approfondie. Nos collaborateurs ont aguerri une expérience de plusieurs centaines de jours sur divers projets de migration comme celle-ci. Cette expertise garantit que vos projets de migration seront menés avec succès et sécurité, en minimisant vos coûts et en maximisant les performances de vos applications.

Chez Elosi, nous savons que la réussite de vos projets dépend avant tout de la qualité des experts qui les réalisent. C’est pourquoi nous mettons à votre disposition des profils qualifiés, ayant des années d’expériences dans leurs domaines respectifs.

Elosi vous propose une expertise 360° combinant des compétences en infrastructure, développement et architecture, au service de vos projets. Nous vous accompagnons de A à Z dans votre projet : étude de l’existant, définition des besoins, maquette, UX, gestion de la migration…

 

Contactez-nous dès maintenant !