Many modern javascript frameworks offer support for both functional and class-based components. Even though the majority of the Vue.js Community has gone in the direction of functional components, there is still the capability to use Class Based Components. To learn more, try out some of our video tutorials.
Setup
On the the first things you have to do is install the vue-cli. This tool will allow you to create Vue.js projects from scratch.
npm install -g @vue/cli
Once the cli is installed, you should be able to check the version using the proper command.
vue --version
Now create a new project
vue create hello-world
Manually select features and select Typescript

Select class-style syntax and the options for ESLint that you wish to use.

Now you can cd into your project folder and open it in your text editor of choice. I’ll be using VSCode
cd hello-world
code .
Class-Based Components
Under the components folder, you will see a file called HelloWorld.vue. This will be the component that we are modifying. Remove any extra HTML until you only see the HTML and Vue code displayed below.
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
You will see a vue-property-decorator import. This is the package that allows for us to use class-based components. This actually derives from the official vue-class-component package. You will also see that there is a msg variable in handlebars as well as its matching property in the class component. The @Prop annotation specified that this is a prop on the component that is passed in from a parent component.
Let’s add a new state variable to our component called name
name = "James";
We can then show that name in our template by using the same handlebars that we used for our prop.
<template>
<div class="hello">
<h1>{{ msg }} {{ name }}</h1>
</div>
</template>
Modifying Vue State
Now that we have our state in our component, we can make changes to it by having an event. We will create a click event that changes the name on the component.
<template>
<div class="hello">
<h1>{{ msg }} {{ name }}</h1>
<button v-on:click="changeName">Change Name</button>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
name = "James";
@Prop() private msg!: string;
changeName() {
this.name = "Codebrains";
}
}
</script>
Now if we run our application, we will get our component displayed on the web page.

Conclusion
Even though this is a simple example, class-based components can be a very powerful tool. They are an optional add-on to Vue.js and serve as a way to help your app mesh better with frameworks like Nest.js and Adonis.js. If you’re interested in learning more, sign up for our video tutorials on the Official Codebrains Course Site.
Codebrains Newsletter
Get weekly dev news and tutorials.
About The Author: James Coonce
James Coonce is a programmer from Tampa Fl that has a love for golf, travel and language learning. When he's not hitting golf balls, he's probably watching foreign movies.
More posts by James Coonce