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

Question

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?

Karlene

Answer 1

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.

Britney

so is it still safe to use class components using vue-class-component library(which it is based on object-based component api)? – Karlene

I wouldn't recommend any non OOP API when OOP API is available. It is 21 century now and even JS supports OOP base. – Subjugate

@Pavel_K Well I disagree. OOP is not only viable programming paradigm. Functional (and Composition API is functional in the core) works very well too, especially for dynamic languages. On top of that, the question was about TS and Composition API is preferred exactly because it is designed to work well with TS....unlike class component approach (and this is one of the reasons why official class based API proposal was dropped) – Melyndamem

I understand you. The reasons why I would recommend class component approach: 1) in backend we, of course, use OOP, so it is better to use same paradigm in frontend (same paradigm, same domain classes) within one project 2) TS supports OOP very well 3) there is a strong movement to OOP in JS - clases in ECMAScript 2015 and even JSON now is parsed to class instances - see for example class-transformer library 4) class component will be supported in Vue 3 and will support composition API see github.com/vuejs/vue-class-component/issues/402 – Subjugate

Answer 2

I'm created a vue 3 class components based on composition API. Npm Package. Use it if found any bugs, or forgotten features from composition API issue.

Snowblind