L’application actuelle est basée sur Vue 2 et utilise des class components (vue-class-component) ainsi que les décorateurs (vue-property-decorator). Ces technologies ne sont plus supportées en Vue 3, ce qui impose leur suppression dans tous les composants. Un outil de migration automatique existe : vue-class-migrator. Il permet de convertir les composants en utilisant l’Option API, mais présente certaines limitations : - Post-traitement nécessaire : après la transformation, des corrections manuelles sont requises pour éliminer les erreurs/warnings. - Uniquement l'option API - Ne gère pas l’héritage : l’outil ne convertit pas les composants hérités. Il faut donc transformer ces relations en mixins (Option API) ou en composables (Composition API). - Autres limitations : liste complète disponible [ici](https://github.com/getyourguide/vue-class-migrator). Dans !528, quelques composants ont déjà été migrés à l’aide de cet outil. Les composants migrés sont désormais rangés dans src/vuejs afin de visualiser l’avancement de la migration et, à terme, séparer clairement le code Vue du reste de l’application. **Choix techniques pour la migration** - L’Option API est compatible avec Vue 3, mais la Composition API est à privilégier pour les futurs développements. - Dans le cadre de la migration, si une transformation manuelle est nécessaire, il est préférable d’utiliser la Composition API (notamment pour gérer l’héritage entre les composants). ## Phase 1 : Préparation de la version actuelle (Vue 2.7) avant la migration ### 1. Inventaire des dépendances actuelles | Dépendance | Version actuelle | Compatibilité Vue 3 | |----------------------------|-----------------|----------------------| | `vue-class-component` | 7.2.6 | Obsolète | | `vue-property-decorator` | 9.1.2 | Obsolète | | `vue-debounce-decorator` | 1.0.1 | Obsolète | | `vue-router` | 3.5.1 | 4 | | `vuetify` | 2.6.1 | Vuetify 3 | | `vuex` | 3.x.x | Vuex4, Peut être remplacé par `pinia` à terme | | `vue-i18n` | 8.26.3 | Mise à jour nécessaire? (`@intlify/vue-i18n-next`) | | `vue-long-click` | 0.1.0 | À tester | | `vuetify-dialog` | 2.0.14 | À tester | ### 2. Migration progressive des .vue vers l'Option API (voire la composition API) #### Objectif : Éliminer l’usage des class components avant le passage à Vue 3. - Utiliser [`vue-class-migrator`](https://github.com/getyourguide/vue-class-migrator) pour la conversion automatique en Option API. Commande: `yarn vue-class-migrator -d src/vuejs/path/to/component/dir` - Convertir manuellement les composants qui utilisent l’héritage (`extends`) en mixins (Option API) ou composables (Composition API). - Prioriser la Composition API pour les composants nécessitant une transformation manuelle. #### Proposition d'ordre de transformation : - Etape 1 : petits composants sans héritage - Etape 2 : composants complexes sans héritage - Etape 3 : composants avec héritage. Pour chaque relation d'héritage - Etape 3.1: Copie du (ou des) composant(s) parent(s) transformés. Il faut garder les 2 versions tant que tous les composants enfants ne soit transformés. - Etape 3.2: Transformation des composants enfants - Etape 3.3: suppression des `class components` parents. #### Organisation des fichiers migrés : - Les composants déjà migrés sont placés dans `src/vuejs`. - Les composants à migrer restent dans leur dossier d'origine jusqu'à transformation. ### 3. Migration des dépendances compatibles vue3 ### 4. Remplacement des dépendances incompatibles vue3 ## Phase 2 : Migration - installation de `@vue/compat` - correction des erreurs - correction des warnings ## Phase 3 : Post-migration - Remplacer VueX par pinia - PortalVue devrait être compatible vue3 mais Vue3 inclut 'teleport' maintenant. - Tout nouveau code en Composition API - A terme, au fil de l'eau: passer les composants en option API en composition API. Meilleure maintenabilité et moins de dette technique future.