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.

Document

See https://class-component.vuejs.org

Online one-click setup for contributing

Contribute to Vue Class Component using a fully featured online development environment that will automatically: clone the repo, install the dependencies and start the docs web server and run yarn dev.

Issue reporting / pull requests

See contribution guideline

License

MIT