vue-class-component

What is vue-class-component?

The vue-class-component package is a library that allows you to define Vue components using ES2015/ES6 class syntax. It provides a more structured and object-oriented approach to building Vue components, making it easier to manage and maintain complex applications.

What are vue-class-component's main functionalities?

Class-based Component Definition

This feature allows you to define Vue components using ES6 class syntax. The @Component decorator is used to mark a class as a Vue component.

import { Vue, Component } from 'vue-class-component';

@Component
class MyComponent extends Vue {
  message: string = 'Hello, world!';

  greet() {
    console.log(this.message);
  }
}

Lifecycle Hooks

You can define lifecycle hooks as methods within the class. This example shows how to use the created lifecycle hook.

import { Vue, Component } from 'vue-class-component';

@Component
class MyComponent extends Vue {
  created() {
    console.log('Component created');
  }
}

Computed Properties

Computed properties can be defined as getter methods within the class. This example demonstrates a computed property that concatenates first and last names.

import { Vue, Component } from 'vue-class-component';

@Component
class MyComponent extends Vue {
  firstName: string = 'John';
  lastName: string = 'Doe';

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

Watchers

Watchers can be defined using the @Watch decorator. This example shows how to watch for changes to the 'message' property.

import { Vue, Component, Watch } from 'vue-class-component';

@Component
class MyComponent extends Vue {
  message: string = 'Hello';

  @Watch('message')
  onMessageChanged(newValue: string, oldValue: string) {
    console.log(`Message changed from ${oldValue} to ${newValue}`);
  }
}

Other packages similar to vue-class-component

vue-property-decorator

The vue-property-decorator package extends vue-class-component by adding decorators for props, watch, emit, and more. It provides a more comprehensive set of tools for defining Vue components using TypeScript and class-style syntax.

vue-tsx-support

The vue-tsx-support package provides a way to write Vue components using TypeScript and JSX. It offers type safety and a more React-like development experience, which can be beneficial for developers familiar with React.

vue-decorator

The vue-decorator package is another library that provides decorators for Vue components. It is similar to vue-class-component but focuses more on providing a wide range of decorators for different Vue features.

README

vue-class-component

ECMAScript / TypeScript decorator for class-style Vue components.

Usage

Required: ECMAScript stage 1 decorators. If you use Babel, babel-plugin-transform-decorators-legacy is needed. If you use TypeScript, enable --experimentalDecorators flag.

It does not support the stage 2 decorators yet since mainstream transpilers still transpile to the old decorators.

Note:

1. methods can be declared directly as class member methods.

2. Computed properties can be declared as class property accessors.

3. Initial data can be declared as class properties (babel-plugin-transform-class-properties is required if you use Babel).

4. data, render and all Vue lifecycle hooks can be directly declared as class member methods as well, but you cannot invoke them on the instance itself. When declaring custom methods, you should avoid these reserved names.

5. For all other options, pass them to the decorator function.

Example

Following is the example written in Babel. If you are looking for TypeScript version, it's in the example directory.

<template>
  <div>
    <input v-model="msg">
    <p>prop: {{propMessage}}</p>
    <p>msg: {{msg}}</p>
    <p>helloMsg: {{helloMsg}}</p>
    <p>computed msg: {{computedMsg}}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  props: {
    propMessage: String
  }
})
export default class App extends Vue {
  // initial data
  msg = 123

  // use prop values for initial data
  helloMsg = 'Hello, ' + this.propMessage

  // lifecycle hook
  mounted () {
    this.greet()
  }

  // computed
  get computedMsg () {
    return 'computed ' + this.msg
  }

  // method
  greet () {
    alert('greeting: ' + this.msg)
  }
}
</script>

You may also want to check out the @prop and @watch decorators provided by vue-property-decorators.

Using Mixins

vue-class-component provides mixins helper function to use mixins in class style manner. By using mixins helper, TypeScript can infer mixin types and inherit them on the component type.

Example of declaring a mixin:

// mixin.js
import Vue from 'vue'
import Component from 'vue-class-component'

// You can declare a mixin as the same style as components.
@Component
export class MyMixin extends Vue {
  mixinValue = 'Hello'
}

Example of using a mixin:

import Component, { mixins } from 'vue-class-component'
import MyMixin from './mixin.js'

// Use `mixins` helper function instead of `Vue`.
// `mixins` can receive any number of arguments.
@Component
export class MyComp extends mixins(MyMixin) {
  created () {
    console.log(this.mixinValue) // -> Hello
  }
}

Create Custom Decorators

You can extend the functionality of this library by creating your own decorators. vue-class-component provides createDecorator helper to create custom decorators. createDecorator expects a callback function as the 1st argument and the callback will receive following arguments:

• options: Vue component options object. Changes for this object will affect the provided component.
• key: The property or method key that the decorator is applied.
• parameterIndex: The index of a decorated argument if the custom decorator is used for an argument.

Example of creating NoCache decorator:

// decorators.js
import { createDecorator } from 'vue-class-component'

export const NoCache = createDecorator((options, key) => {
  // component options should be passed to the callback
  // and update for the options object affect the component
  options.computed[key].cache = false
})

import { NoCache } from './decorators'

@Component
class MyComp extends Vue {
  // the computed property will not be cached
  @NoCache
  get random () {
    return Math.random()
  }
}

Adding Custom Hooks

If you use some Vue plugins like Vue Router, you may want class components to resolve hooks that they provides. For that case, Component.registerHooks allows you to register such hooks:

// class-component-hooks.js
import Component from 'vue-class-component'

// Register the router hooks with their names
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate' // for vue-router 2.2+
])

// MyComp.js
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
class MyComp extends Vue {
  // The class component now treats beforeRouteEnter
  // and beforeRouteLeave as Vue Router hooks
  beforeRouteEnter (to, from, next) {
    console.log('beforeRouteEnter')
    next() // needs to be called to confirm the navigation
  }

  beforeRouteLeave (to, from, next) {
    console.log('beforeRouteLeave')
    next() // needs to be called to confirm the navigation
  }
}

Note that you have to register the hooks before component definition.

// main.js

// Make sure to register before importing any components
import './class-component-hooks'

import Vue from 'vue'
import MyComp from './MyComp'

new Vue({
  el: '#app',
  components: {
    MyComp
  }
})

Caveats of Class Properties

vue-class-component collects class properties as Vue instance data by instantiating the original constructor under the hood. While we can define instance data like native class manner, we sometimes need to know how it works.

this value in property

If you define an arrow function as a class property and access this in it, it will not work. This is because this is just a proxy object to Vue instance when initializing class properties:

@Component
class MyComp extends Vue {
  foo = 123

  bar = () => {
    // Does not update the expected property.
    // `this` value is not a Vue instance in fact.
    this.foo = 456
  }
}

You can simply define a method instead of a class property in that case because Vue will bind the instance automatically:

@Component
class MyComp extends Vue {
  foo = 123

  bar () {
    // Correctly update the expected property.
    this.foo = 456
  }
}

undefined will not be reactive

To take consistency between the decorator behavior of Babel and TypeScript, vue-class-component does not make a property reactive if it has undefined as initial value. You should use null as initial value or use data hook to initialize undefined property instead.

@Component
class MyComp extends Vue {
  // Will not be reactive
  foo = undefined

  // Will be reactive
  bar = null

  data () {
    return {
      // Will be reactive
      baz: undefined
    }
  }
}

Build the Example

$ npm install && npm run example

Questions

For questions and support please use the the official forum or community chat. The issue list of this repo is exclusively for bug reports and feature requests.

License

MIT