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 https://composition-api.vuejs.org/.

HansingerHansinger
352

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.
4

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