Creating Your Vue Project

To start, set up your Vue project using the Vue CLI with the command:

vue create your-project-name

Next, install the vue-class-component library using either of the following commands:

npm install --save vue vue-class-component

or

yarn add --save vue vue-class-component

If you're utilizing TypeScript, ensure to enable decorators by adding the experimentalDecorators option in your tsconfig.json. Update the compilerOptions section as follows:

{

"compilerOptions": {

"target": "es5",

"module": "es2015",

"moduleResolution": "node",

"strict": true,

"experimentalDecorators": true

}

}

For Babel users, you'll need to install the necessary plugins with:

npm install --save-dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

Then, in your .babelrc, include:

{

"plugins": [

["@babel/proposal-decorators", { "legacy": true }],

["@babel/proposal-class-properties", { "loose": true }]

]

}

This setup allows you to leverage decorators and class properties without restriction.

Creating Your First Component

Now, let's implement our initial class-based component using the vue-class-component module. Here’s how you can define a simple component named HelloWorld.

HelloWorld.vue

<template>

<div>{{ message }}</div>

</template>

<script>

import Vue from 'vue';

import Component from 'vue-class-component';

@Component

export default class HelloWorld extends Vue {

message = 'Hello World';

}

</script>

App.vue

<template>

<div id="app">

<HelloWorld />

</div>

</template>

<script>

import HelloWorld from "./components/HelloWorld";

export default {

name: "App",

components: {

HelloWorld,

},

};

</script>

In the HelloWorld.vue, the HelloWorld class features a message property that can be accessed in the template. You can also include a data method that returns an object with reactive properties:

<template>

<div>{{ message }}</div>

</template>

<script>

import Vue from "vue";

import Component from "vue-class-component";

@Component

export default class HelloWorld extends Vue {

data() {

return {

message: "Hello World",

};

}

}

</script>

The message property defined in the data method is reactive, making it usable in the template.

Adding Methods

To incorporate methods, simply define them as class methods:

<template>

<div>

<button @click="increment">Increment</button>

{{ count }}

</div>

</template>

<script>

import Vue from "vue";

import Component from "vue-class-component";

@Component

export default class HelloWorld extends Vue {

count = 0;

increment() {

this.count++;

}

}

</script>

Here, the increment method increases the count reactive property by 1, which is linked to the button's click event.