Vue Class Component Vue 3

Posted on  by admin
This post explains how to add the composition API to Vue 3 + Typescript class components.

Vue 3 is great, specially the composition API is an awesome new feature.

Migrating Vue 2 class based components to Vue 3 is not difficult, except for some small changes like changing @Component to @Options everything is staying the same.

After migrations of Vue 3 with class components, we were ready to add the composition API.

This was harder than we expected because official docs don’t provide example for this specific setup


For easier migration, it would be easier to keep the class components. This is an example with a small module using the composition API.

Calling the “get” function in the Vue component can be done like this:.

Now the ‘artists’ module can be rendered in the template.

All the logic for ‘artists’ is located in ‘user-artists.ts’ and easy accessible in the component template.

In the below Github repository you can find a full example, using two modules:.

The setup() Hook