[Vue + TS] Create Type-Safe Vue Directives in TypeScript

Directives allow us to apply DOM manipulations as side effects. We’ll show you how you can create your own Vue directive to change a component’s colors and type-safe it with TypeScript.

We’ll additionally show how you can pass objects to your directives and make them more flexible!

 

Create a directive definition:

// color-directive.ts

import { DirectiveOptions } from 'vue'

const directive: DirectiveOptions = {
    inserted(el, node) {
        /**
         * Using value:
         * v-colorDirective={color: 'red', backgroundColor: 'blue'}
         */
        if (node.value) {
            el.style.backgroundColor = node.value.backgroundColor;
            el.style.color = node.value.color;
        }

        /**Using modifiers:
         * v-colorDirective.color
         * v-colorDirective.backgroundColor
         */
        if (node.modifiers.color){
            el.style.color = node.value;
        }

        if (node.modifiers.backgroundColor) {
            el.style.backgroundColor = node.value;
        }
    }
};

export default directive;

 

Using directive inside component:

<template>
  <div class="hello">
    <h1 v-colorDirective="{color: 'red', backgroundColor: 'blue'}">{{ message }}</h1>
    <button @click="clicked">Click</button>
    <router-link to="/hello-ts">Hello Ts</router-link>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import colorDirective from '../color-directive';

@Component({
  directives: {
    colorDirective
  }
})
export default class Hello extends Vue {
 ....   
}

<template>
    <div>
        <h3 v-colorDirective.color="'green'">HelloTs</h3>
        <router-link to="/">Hello</router-link>
    </div>
</template>
<script lang="ts">

import Vue from 'vue'
import Component from 'vue-class-component'
import colorDirective from '../color-directive';

@Component({
    directives: {
        colorDirective
    }
})
export default class HelloTs extends Vue {
  ...
}