Use Class Style Component Syntax

Posted on  by admin

Vue.js 2 supports class-style components. If you are coming from an Angular (2+) background, you are probably familiar with the pattern of writing components as classes using properties and decorators to describe more complex parts of your component.

The biggest advantage class-style components have over standard Vue.js components is that they make it clearer where this actually points to in the compiled component, and allow for more concise code.

In this article, you will be introduced to using vue-class-component and vue-property-decorator to support TypeScript in Vue.js class-based components.

To follow along with this article, you will need:. Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment.

Some familiarity with setting up a Vue.js project and Single File Components.

Some familiarity with TypeScript conventions. This tutorial was verified with Node v15.1.0, npm v6.14.8, Vue.js v2.6.11, TypeScript v3.9.3, @vue/cli v4.5.0, vue-class-component v7.2.3, and vue-property-decorator v8.4.2.

You will need vue-class-component and vue-property-decorator installed. You can use @vue/cli to create a new Vue.js project:. For the purposes of this tutorial, the configuration will require:. @vue/-plugin-typescript will install typescript, vue-class-component, and vue-property-decorator.

Then, navigate to the project directory:. At this point, you have a Vue.js project set up for TypeScript and class-style components.

A class component is a TypeScript class that extends the Vue object. In single-file components, make sure you set the