Search code examples
typescriptvue.jsvue-class-components

what will happen for vuejs projects based on class components in vuejs v3.0?


I wanna upgrade my vuejs project to typescript based on class components, but i read in vue issue's https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121 :

Update: the Class API proposal is being dropped.

so what will happen to existing class component-based projects? and more important, based on this article: https://alligator.io/vuejs/using-typescript-with-vue/ which says

Since we are not using the class-style syntax, you use the as keyword to declare data as a data type.

is this way of using typescript safe in vue3.0?


Solution

  • Currently there is no official class-based API. RFC was about adding one but was dropped for the reason discussed there.

    Existing projects are using vue-class-component library which builds on top of official object-based component API (officially called Options API). This should continue to work in 3.0 (because Options API stays the same) but suffer from the same drawbacks mentioned in the RFC. Here is a comment from maintainer declaring support for Vue 3.

    Second linked article is using TypeScript without vue-class-component - no classes, just regular object-based component API + TypeScript type annotations. So yes, this will work in 3.0

    However if you are starting with TypeScript in Vue now, I would strongly recommend to take a look at the new composition API which will be added in 3.0. It's an official API (not a library) and has many benefits compared to any existing solution.

    You can even use Composition API with Vue 2 thanks to composition-api - this is plugin but plan is in place to make it official, better integrated into Vue core and maintained by Vue core team.