Moving a Live SaaS From Vue 2 to Vue 3

Vue 2 reached end of life on December 31, 2023, so it no longer gets official fixes, including security fixes. We moved Coach Catalyst, a live coaching platform, from Vue 2 to Vue 3. The same project rebuilt its chat, added a community module and set up Stripe Connect payouts for coaches. Here is what the migration involved.

1. 01What changes between Vue 2 and Vue 3

   Most Vue 2 code still works in Vue 3, but not all of it. These changes touch most apps.

   1. Apps start with createApp instead of new Vue, and plugins install with app.use.

   2. Filters are gone. They become methods or computed properties.

   3. The event bus pattern, using $on and $off, is gone. Components talk through props, events or a store.

   4. Many plugins needed new versions for Vue 3, and some never got one.

2. 02How we ran the move

   We migrated Coach Catalyst section by section, while coaches and clients kept using it. Vue’s migration build, @vue/compat, runs Vue 2 code on Vue 3 and warns about each change. We fixed those warnings one area at a time.

   We kept Vuex for state management, updated for Vue 3. Pinia is now Vue’s recommended store for new code, but Vuex still works with Vue 3, so it didn’t need to change.

3. 03Components, directives and plugins

   Vue 3 still supports the Options API, so moving to the Composition API is a choice, not a requirement. On Coach Catalyst, we refactored the components to the Composition API.

   We updated the directives and plugins for Vue 3 as we went, and reduced the bundle size so pages load faster.

4. 04Rebuilding the chat

   Coach Catalyst’s chat module was written in CoffeeScript. It was hard to use and needed performance work. We rebuilt it in Vue, with real-time updates and more efficient data fetching, so it stays responsive under load.

5. 05Adding what the old structure never planned for

   A community module was hard to add, because the project was never structured for one. We isolated the community components and brought them in step by step.

   Coaches now get paid directly through a Stripe Connect marketplace, with OAuth onboarding and secure payouts. It opened a new revenue stream for coaches and for the platform.

6. 06How to plan a Vue 3 move

   1. List every plugin and check it has a Vue 3 version. Replace the ones that don’t before you start.

   2. Use the migration build, @vue/compat, and fix its warnings one area at a time.

   3. Don’t change your store unless you need to. Vuex works with Vue 3, and you can move to Pinia later.

   4. Keep the app releasable throughout, and move one section at a time. Our Vue.js developers have made this move before.