Photo by Geert Pieters on Unsplash

If we prefer to use classes, we can use the class-based components API that comes with Vue.

In this article, we’ll look at how to developing Vue apps with class-based components.

Getting Started

We can create our Vue project as usual with the Vue CLI’s vue create command.

Then we install the vue-class-component library by running:

npm install --save vue vue-class-component

with NPM or:

yarn add --save vue vue-class-component

with Yarn.

If we’re using TypeScript, we also have to add the experimentDecorators option to tsconfig.json so we can use decorators.

We should put the following into the compilerOptions property of it:

{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"strict": true,
"experimentalDecorators": true
}
}

And if we're using Babel, we’ve to install the @babel/plugin-proposal-decorators and @babel/plugin-proposal-class-properties packages by running:

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

In .babelrc , we add:

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

to let us add decorators and class properties that aren’t bound to the class.

Create Our First Component

Now we can use the vue-class-component modile to create our first class-based component.

For instance, we can write:

components/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 HelloWorld.vue , we have the HelloWorld class has the message property that isn’t bound to the HelloWorld instance.

We can use that in the template.

Also, we can add the data method and return an object with the 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 returned with data is reactive, so we can use it in the template.

To add methods, we add 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>

We add the increment method to increase the count reactive property by 1.

And we pass that into the @click directive as its value.

Conclusion

We can add class-based components in our Vue app with the vue-class-component library.

More content at plainenglish.io


Getting Started with Developing Vue Apps with Class-Based Components was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.