Vue class based to vue2 with TS support

[matrunchyk]

No description provided.

[matrunchyk]

Fixes: #33

[rndmerle]

Nice! We've to migrate a bunch of components from class to composition functions on our project. I'll start from this, it helps a lot. Thanks ;)

[rndmerle]

@matrunchyk I've a bunch of TS errors when trying to build, like Property 'init' does not exist on type 'Identifier' any idea?
That's ast-types typings.
I tried with npm and yarn, and with node@12 also.
Since @types/jscodeshift is still 0.7.1 I don't get what's the issue.
I tried to upgrade @types/jscodeshift to 0.11.0, or to downgrade jscodeshift to 0.7.1 but it didn't help.

[matrunchyk]

@rndmerle Yeah I will have to enhance typings by declaring appropriate types/interfaces. For now feel free to ignore issues by specifying : any or as any wherever needed.

[NikhilVerma]

It would be great if we can update this to use the new Vue 2.7 defineComponent instead. Which has much better type inference, however I don't think it supports mixins.

[matrunchyk]

This is exactly what it does for TS components keeping all the typings.

Btw, I have another script which migrates Vue2 to Vue3 script setup (mixin are also supported). I'll publish/share a repo if someone will be interested.

[NikhilVerma]

@matrunchyk You are using the Vue.extend api. I am talking about defineComponent from Vue 2.7 (and 3) which has much better support for Typescript.

https://blog.vuejs.org/posts/vue-2-7-naruto.html

[matrunchyk]

Ah you're right @NikhilVerma. I think the argument of Vue.extend and defineCompontent is compatible, so after using the script you could just Find-Replace all mentions of Vue.extend to defineComponent as-is. That's basically what I did in my projects.

But I agree, we can replace it directly in the migration script itself.

[smk]

Hey @matrunchyk ,

Btw, I have another script which migrates Vue2 to Vue3 script setup (mixin are also supported). I'll publish/share a repo if someone will be interested.

I'd be interested in the Vue 3 script setup version even if only partially working since I have a few (read: hundreds) of components to convert, and any starting point is better than none. 😅 Would you mind sharing it with me?

[Satakshi-ctrl]

Hi @matrunchyk Can you pls let me know how to use this to convert vue2 class based code with TS to vue3 options api