vue-class-component VS composition-api

This was a good change. Evan has always been extremely good at putting his finger on the pulse of the frontend community. If there's a feature or paradigm that people love that would fit in Vue, Evan will incorporate it. Over the years, Vue has implemented (and sometimes later deprecated) dependency injection, JSX support, custom elements, Angular-style class components, Svelte-style ref sugar, and now Solid-inspired compiler optimizations. They even changed the order of a Vue file to match that of Svelte: first the script, then the template.

That is the whole point. Just check this code. If it was written in a basic vue 2 syntax style it wouldn't be a probrem at all :D So I am looking for a workoround to reuse either a component, or the whole module(page). Some trick which won't require a refactoring of a large app.

The docs are not wrong perse because they distance themself from this package: https://github.com/vuejs/vue-class-component But at the time they recommended this package for best ts experience in vue 2. YOu can see that Evan's account is the second biggest contributor.

Vue(TS) is abandoning vue-class-component, preferring to ask developers to use the Composition API. See https://github.com/vuejs/vue-class-component/issues/569

Due to `vue-class-component` is [deprecated in vue3](https://github.com/vuejs/vue-class-component/issues/569). I built a alternative package to do that with many features.

This topic has come up a few times, but I'm hoping that at some point there can be some official guidance from the Vue team on vue-class-components.

According to the Github commit history, the last commit was on 15 Dec 2020. Also, in this conversation, it's saying this library is not maintained anymore, that's why it doesn't work with Vue 3 at all. I did switch from Vue 2 with class style component to Vue 3 since last May. I also switch from Vuex4 to Pinia since last December. I don't have any big issue regarding pass props through different components or using Pinia. The best way to understand how it works is checking Vue 3 and Pinia official document.

I'm particularly a little salty about the situation of vue-class-component. This is an officially supported vue library that thousands of people use (including myself), and it has been left to die on the vine with regard to Vue3. It has been in the same RC state for over a year, with no communication or support as to what is happening.

3) Previously officially supported projects are being essentially abandoned. Vue Cli has been waiting for V5 for the past year, with no indication of release date, and now is in "maintenance mode". Vue Class Component has similarly been waiting for an update for over a year, and still does not have an official release that supports Vue3.

When I was using Vue2 along with vue-class-component and vue-property-decorator it was easy to synchronize v-models between components simply using @ModelSync(). When Vue 3 came out with its Composition API another way was needed to achieve the same result as if Class Component was used.

Composition API (now built-in): Composition API is a built-in feature of Vue 3 and is currently available to Vue 2 through the officially maintained @vue/composition-api plugin. In Vue 3, it's mainly used together with the syntax in single-report additives. Here is a basic instance of a issue using Composition API:

√ What would you like to build? » App with Quasar CLI, let's go! √ Project folder: ... quasar-qrcode-scanner √ Pick Quasar version: » Quasar v1 (Vue 2) √ Pick script type: » Typescript √ Package name: ... quasar-qrcode-scanner √ Project product name: (must start with letter if building mobile apps) ... Quasar QR Code Scanner √ Project description: ... A Quasar Project √ Author: ... √ Pick a Vue component style: » Composition API (recommended) (https://github.com/vuejs/composition-api) √ Pick your CSS preprocessor: » Sass with SCSS syntax √ Pick a Quasar components & directives import strategy: (can be changed later) » * Auto-import in-use Quasar components & directives - also treeshakes Quasar; minimum bundle size √ Check the features needed for your project: » ESLint √ Pick an ESLint preset: » Prettier

I'd just found out about this back port of the Composition API to Vue 2 (https://github.com/vuejs/composition-api). What's your experience with that? Is it stable enough to use in a production project with +1000 users? Or is more experimental?

While Vue 3 has had a paradigma change by switching to the Composition API as the primary API, you still can use the "old" Options API which stays mostly unchanged to Vue 2. And vice-versa Vue 2 actually supports most of the Composition API when you include an additional plugin: https://github.com/vuejs/composition-api

Is it even worth it to use https://github.com/vuejs/composition-api or should i migrate to vue 3. I'm only using vue 2 so i can use the vuetify calendar component.

Npm package: @vue/composition-api

If you can’t migrate to Vue 3 today, then you can still use the Composition API already. You can do this by installing the official Composition API Vue 2 Plugin.

I see that the @vue/composition-api also admits to having some performance overhead when used with Vue 2. And it appears to have quite a list of its own gotchas, judging from the README.

For what it's worth most of Vue 3's features can be backported to Vue 2 apps by including the @vue/composition-api package. I agree with the other comment, the v2 docs will get you very far.