Developing Vue Apps with Class-Based Components — Mixins and TypeScript

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.

Mixins

We can create mixins for Vue class-based components with the mixins function.

For instance, we can write:

<template>
  <div>
    <p>{{ hello }} {{ world }}</p>
  </div>
</template>

<script>
import Vue from "vue";
import Component, { mixins } from "vue-class-component";

@Component
class Hello extends Vue {
  hello = "Hello";
}

@Component
class World extends Vue {
  world = "World";
}

@Component
export default class HelloWorld extends mixins(Hello, World) {
  created() {
    console.log(this.hello, this.world);
  }
}
</script>

We call mixins with the Hello and World class components.

Then the hello and world class properties will be accessible from the Helloworld component class.

To access them within the class, we can access them from the this object.

And we can also access them in the template.

this Value

We can’t use arrow functions as methods in our component class since we need to access this inside.

Arrow function doesn’t bind to this , so we cant’ use them as class methods.

For instance, if we write:

<template>
  <div>
    <p @click="bar">{{ foo }}</p>
  </div>
</template>

<script>
import Vue from "vue";
import Component from "vue-class-component";

@Component
export default class HelloWorld extends Vue {
  foo = 123;

  bar = () => {
    this.foo = 456;
  };
}
</script>

Then bar won’t update the value of foo since the value of this isn’t the class instance.

Constructor

We shouldn’t add constructor in our class components since they don’t fit with the Vue lifecycle.

For instance, we shouldn’t write:

<template>
  <div>
    <p>{{ foo }}</p>
  </div>
</template>

<script>
import Vue from "vue";
import Component from "vue-class-component";

@Component
export default class HelloWorld extends Vue {
  foo = 123;

  constructor() {
    this.foo = 456;
  }
}
</script>

We can’t access reactive properties in the constructor and we’ll get an error if we try in the constructor.

Creating Class Components with TypeScript

We can create class-based components with TypeScript.

For instance, we can write:

src/components/HelloWorld.vue

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";

const GreetingProps = Vue.extend({
  props: {
    name: String,
  },
});

@Component
export default class HelloWorld extends GreetingProps {
  get message(): string {
    return `Hello, ${this.name}`;
  }
}
</script>

src/App.vue

<template>
  <div id="app">
    <HelloWorld name="james" />
  </div>
</template>

<script lang='ts'>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>

tsconfig.json

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

We add the compilerOptions.esModuleInterop property and set it to true so that we can import ES modules in our code.

In App.vue , we register the HelloWorld component.

And in HelloWorld.vue , we call Vue.extend to create the GreetProps class with the props.

Then we can use the extends keyword to create a class that extends GreetingsProp to accept the name prop.

In the template, we display the message , which we get from the message getter.

Conclusion

We can use Vue class-based components with TypeScript and define mixin classes easily in our Vue project.