Is there a class component library to Vue that does not use decorators?

user_2138090 0
Viewed 484

The Vue class component library uses the @Component decorator, and must thus be transpiled to work. Is there a way to use Vue class components without this decorator? Like, either a work-around or another similar library?

Use-case: Lower commitment for a legacy project, but still possible to analyze with tsc.

vue.js
2 Answers

Transpiled environment is the expected scenario of use for Vue. It relies on custom .vue format and may lack some features without it, as well as the support of some third-party libraries because they rely on it.

The use of classes never was a good idea in Vue because it doesn't follow OOP paradigm. A class isn't instantiated directly but used as syntactic structure that is translated to Vue.component definition. Vue class components have inherent problems, one of which is poor support for TypeScript types. If Vue classes aren't already used in the project, there are reasons for them to not be the first choice.

In case there's a necessity to use Vue class components, this can be done in vanilla ES6 because decorators proposal is syntactic sugar, decorators are functions with specific signatures that are applied to classes and members and decorate them.

@foo
@bar()
class Baz {}

is the same as

let Baz = foo(bar()(class Baz {}))

Different decorator types are applied in different ways, also there are some differences between TypeScript and Babel legacy decorators.

@Component
class Foo extends Vue {
  @Provide('bar') baz = 'bar'
}

is translated to

let Foo = class Foo extends Vue {
  constructor() {
    this.baz = 'bar'
  }
}

Provide('bar')(Foo.prototype, 'baz')

Foo = Component(Foo);
user_37315010

With Vue 3 typescript is well supported, you could create your component as follows :

import { defineComponent } from 'vue'

export default defineComponent({
  //the component options like data,props,computed...
})

For more details check the official docs

A running example to get started

user_81728570
Related