How to migrate from class component to Composition API in Vue 3?

I am currently using class component in Vue 3 but as it does not seam maintained anymore I want to slowly migrate to Composition API. How can I do that ?

Are the 2 compatibles ? Can I migrate my components one at a time (that means having some components using class components and other using composition API) ?

Thanks in advance.

Hey :wave:

I am currently using class component in Vue 3 but as it does not seam maintained anymore

I guess what you mean by that is the v2 options API, right? You don’t have to worry about that, it was clearly stated that this is not going to be deprecated.

Can I migrate my components one at a time (that means having some components using class components and other using composition API)

Yes you could. Just bare in mind that some options API features are not available in the composition API. You can’t use the this keyword within a setup function for instance.

I want to slowly migrate to Composition API. How can I do that ?

Well it seems like there were some breaking changes so the first thing I would do is to check if I have code, that would be affected by this.

Furthermore, you’ve to update your main.js.

Instead of doing this:

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

you would do this:

const router = createRouter({})
const store = createStore({})
const app = createApp(App)

app.use(store),
app.use(router)

There might be more but it’s really hard to tell because I don’t know your project. For instance, you might need to update your packages like vue-router or vuex if you use them.

Make a list of all your vue dependencies / npm packages and check if they are compatible with Vue 3.

If you have any questions left, I will be happy to answer them :slightly_smiling_face:

Ah I might misunderstood the migration question. :sweat_smile:

So the composition API is a functional API. Instead of using objects like this:

computed: { fullName: function { return ``${this.first_name} ${this.first_name}`` } }

You would define this in your setup function

setup () {
  const fullName = computed(() => ``${this.first_name} ${this.first_name}`)
}

or instead of defining your variables in data you now instead define them in the setup function like this:

setup () {
  const name = ref('')
}

Ref is just one option you could also use reactive but I’m not going into that any further here (If you want to know more about this: Vue 3: Ref vs Reactive)

Basically, all your JavaScript / Vue code goes into that setup function. Even lifecyle stuff like onMounted

So before migrating I’d really suggest you read the official documentation and learn the difference between those APIs. There’s actually a really nice intro here: Introduction | Vue.js

Thank you for your answer but it is not relevant as I am not talking about the Option API but about the class components (see here for more information about it).

I never used Vue with classes so I can’t exactly help you there, but my experience upgrading a large Vue 2 app to Vue 3 wasn’t a straight forward one.

There is a migration build to help assist you with gradually working your way there so it’s not impossible, but be sure to check all your dependencies for Vue 3 support and have a plan to replace them if there is none.

It looks like there was an effort to add support for classes via the lib you’re using, but the next branch hasn’t seen any commits since January, so seems safe to assume it won’t happen and moving away from classes is the right move.

I’d say give the migration build a go as long as you aren’t affected by the “Known Limitations”.

Best of luck and let us know if you need any help during the process.

1 Like

Thanks for your answer. In my case, we are already using Vue 3 but with the release candidate version of the library for class components. As you mentionned it has not evolved for a long time so I really want to migrate to something more standard.