Migration Fatigue: Balancing Vue 2 → 3 Upgrades with Team Skill Gaps

[kodwings]

We're mid-migration of a large healthcare SaaS app (Vue 2.6/Vuetify → Vue 3.3 + Pinia) and hitting unexpected friction:

// Legacy Vue 2 pattern causing pain export default { mounted() { this.$nextTick(() => { // Mixin-dependent logic this.initChart() // 💥 Options API → Composition API }) } }

Core challenges:

1. Options API Muscle Memory: Devs keep reaching for this in composables
2. Vuetify 3 Readiness: Missing components forcing stopgap rewrites
3. TypeScript Adoption: Implicit any patterns causing downstream type chaos

Our mitigation attempts:

• Incremental migration via vue-demi (works until Vuetify clashes)

• ESLint rules for Composition API enforcement (vue/no-option-api)

• Structured learning paths using platforms like CoderLegion for focused Vue 3 training

Key questions for the community:

1. Tooling Strategies

   • How are you handling Vuetify 2→3 gaps? (We're using vue-components-essential shims)

   • Worth waiting for Vuetify 3.4 or force-migrate to PrimeVue/Quasar?

2. Knowledge Transfer Tactics

   • Are code labs more effective than docs for Options→Composition transitions?

   • How do you debug "this is undefined" in mixed-API codebases?

3. TypeScript Ramp-Up

   • What strictness level (tsconfig.json) balances safety vs. migration pain?

   • Generics training resources for Vuex→Pinia converts?

(Critical lesson: Our <script setup> adoption reduced component boilerplate 62% but exposed reactive object mutations in Vue 2 mixins.)