# Overview
WARNING
This library is no longer actively maintained. It is no longer recommend to use Class-based components in Vue 3. The recommended way to use Vue 3 in large applications is Single-File Components, Composition API, and <script setup>. If you still want to use classes, check out the community-maintained project vue-facing-decorator.
Additionally, if you're interested in migrating out of class components, you might find the CLI tool vue-class-migrator helpful for the transition.
Vue Class Component is a library that lets you make your Vue components in class-style syntax. For example, below is a simple counter component written with Vue Class Component:
<template> <div> <button v-on:click="decrement">-</button> {{ count }} <button v-on:click="increment">+</button> </div> </template> <script> import Vue from 'vue' import Component from 'vue-class-component' // Define the component in class-style @Component export default class Counter extends Vue { // Class properties will be component data count = 0 // Methods will be component methods increment() { this.count++ } decrement() { this.count-- } } </script> As the example shows, you can define component data and methods in the intuitive and standard class syntax by annotating the class with the @Component decorator. You can simply replace your component definition with a class-style component as it is equivalent with the ordinary options object style of component definition.
By defining your component in class-style, you not only change the syntax but also can utilize some ECMAScript language features such as class inheritance and decorators. Vue Class Component also provides a mixins helper for mixin inheritance, and a createDecorator function to create your own decorators easily.
You may also want to check out the @Prop and @Watch decorators provided by Vue Property Decorator.