Which Vue.js version should our shared component library target? Is it possible to support both using Vue-Demi or other compatibility wrappers?## Summary
**Considerations**Which Vue.js version should our shared component library target, and how can we plan/facilitate migration of projects from Vue 2 to Vue 3?
## Considerations
#### Why does this matter?
This is closely tied up in the question of whether the library should continue supporting IE11 (T286947), because Vue 2 will continue supporting IE while Vue 3 will not. Many Vue 3 features (like the composition API) either already exist for Vue 2 or will be backported in an upcoming 2.x release. However, this is not true for many of the Vue 3 performance optimizations; if we want those we'll need to upgrade. Vue 3 also is fully written in Typescript and promises some improvements in TS workflow.
#### Impact on tooling
* This is closely tied up in the question of whether the library should continue supporting IE11 (T286947), because Vue 2 will continue supporting IE while Vue 3 will not.
* Many Vue 3 features (like the composition API) either already exist for Vue 2 or will be backported in an upcoming 2.x release.
* However, this is not true for many of the Vue 3 performance optimizations; if we want those we'll need to upgrade. Vue 3 also is fully written in Typescript and promises some improvements in TS workflow.
* If we want to use more modern build tools like Vite (very fast, less config than Webpack, HMR), Vue 3 is supported natively while Vue 2 requires an additional plugin; using Vue 2 and continuing to support IE11 means we'll need to continue relying on things like Babel.
* Different versions of the Vue.js browser DevTools are required to support Vue 2 vs Vue 3 apps, which is annoying. There may be other tools we're using that still rely mainly on Vue 2 – however, we're not really depending on any external Vue libraries so that is one less barrier to migration
* We may be able to build our shared library with a compatibility wrapper like [[ https://github.com/vueuse/vue-demi | Vue Demi ]], which could enable it to work in both Vue 2 and Vue 3 apps.
* Vue 3.1 is the official "migration build" of the library; we may want to look at this too: https://www.thisdot.co/blog/vue-3-1-official-migration-build-from-vue-2-to-3
**Relevant Links**
- T251974: planning for Vue 2 --> Vue 3 #### Compatibility helpers
* Vue 3.1 is the official "migrations
**Decisions**
1. build" of the library; //When will the shared component library migrate to Vue 3?//
- Use Vue 3 in shared lib starting now?
- Use Vue 2 in shared lib indefinitely?we may want to look at this too: https://www.thisdot.co/blog/vue-3-1-official-migration-build-from-vue-2-to-3
- Use Vue 2 in shared lib for now and re-evaluate in 6 months to 1 year (implies future migration work will need to be done both for library and for consuming applications)* [[ https://github.com/vueuse/vue-demi | Vue Demi ]] could enable the component library to work in both Vue 2 and Vue 3 apps, but now that the official compatibility build of Vue is out, this might be obselete
#### Migration timeline
- Do all WMF and WMDE applications *need* to migrate, or can some finished work remain in Vue 2 indefinitely?
- Use a compatibility wrapper like Vue-Demi to attempt to write a shared library that can be consumed in both Vue 2 and Vue 3 applications- Are we migrating projects to Vue 3 at the same time that we are migrating them to a shared component library, or are these separate processes?
2. //When will existing WMF and WMDE Vue work migrate to Vue 3?//- Consider the collision of one product that's on Vue 2 and another that's on Vue 3: is this a big problem (avoid at all costs) or no big deal?
#### Relevant Links
- [[ https://v3.vuejs.org/guide/migration/introduction.html | Vue 3 migration guide ]]
- Do all WMF and WMDE appl- [[ https://phabrications *need* to migrate, or can some finished work remain in Vue 2 indefinitely?or.wikimedia.org/T286948#7228961 | Summary of Vue 3 changes and benefits ]]
- Are we migrating projects to Vue 3 at the same time that we are migrating them to a shared component library,- T251974: see here for lots of discussion about a potential migration and a proposed plan
---
## Decisions
#### 1. or areWhen will these sepa shared component library migrate processes?to Vue 3?
**Options:**
3. //How will we enable and facilitate these migrations?//- Use Vue 3 in shared lib starting now
- Upgrade MediaWiki's- Use Vue copy to 3.1 compatibility build?2 in shared lib indefinitely
4. //How will we handle situations where some projects use Vue 2 and some use Vue 3?//- Use Vue 2 in shared lib for now and re-evaluate in 6 months to 1 year (implies future migration work will need to be done both for library and for consuming applications)
- Is this a big problem (avoid at all costs) or no big deal?- Use the Vue compatibility build (or vue-demi) to attempt to write a shared library that can be consumed in both Vue 2 and Vue 3 applications
**Design Systems Team proposal:** To avoid additional migration work in the future, start developing the shared component library in Vue 3 immediately. Introduce this version of the library into MediaWiki once we update the version of Vue within MediaWiki to 3.1, the compatibility build.
//Fallback option//: if some of us want to adopt the shared component library ASAP but must continue to support IE for a while, continue developing the library in Vue 2 with the composition API plugin, and plan for a future migration to Vue 3.
#### 2. When will existing WMF and WMDE Vue work migrate to Vue 3?
#### 3. How will we enable and facilitate these migrations?
**Design Systems Team proposal:** Use the compatibility build to facilitate project migrations, and to support projects running Vue 2 or Vue 3 in the meantime. Eventually, upgrade the Vue version off the compatibility build. See T251974 for full details.
#### 4. How will we handle situations where some projects use Vue 2 and some use Vue 3?
**Design Systems Team proposal:** Lean on the compatibility build to prevent collisions while we're in the middle of the migration process