Vue.js Class Based Components with Typescript

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

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.