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!
[00:00] We are going to create a directive to change the color of the component. First, let's create a color directive file. Here, we are going to write it down. Directives, they have different hooks. We are going to use inserted, which is triggered when the component is inserted into the DOM. We are going to write a console.log here for now.
[00:22] Next, we'll go back to hello Vue component, and we need to import it here. Directives, as any other component properties, are passed into the decorator options. Now, color directive is available within the component, but we still need to define into the HTML.
[00:43] Let's write v-colordirective. If we run this, we see in the console, "Hello from directive," so this is working. We still need to type our directive. Let's go to colordirective.ts, and we have to import directive options from Vue.
[01:00] Vue supports all kind of typings, and directive options are the typings for directives. The first thing we need to do is we have to save that directive in a variable so we can type it. Let's remove everything down there, and support the directive.
[01:22] The inserted method takes two parameters, an element and a node. Because we type it, we get IntelliSense for free. We'll say the first parameter is an HTML element, and the second is a vnode directive.
[01:36] Also, when we type l. or node., we get all the properties from it. The element refers to the DOM of the component that we are applying the directive to. Let's change the background color. Now, we are setting the color from inside the directive, so that's not flexible. We want to pass it as an argument.
[01:59] Let's go back to hello.vue and pass a blue color as an argument. Remember, we're wrapping it into single code, because that will be evaluated as JavaScript. Now, we can access the attribute by using node.value. We see that's working.
[02:18] We can go back and change it to green. We'll see it turns green. Within the node parameter, we can take other properties, for example, modifiers, which are kind of Boolean flags that we can set to the directives.
[02:34] Let's go back to the hello component template, and write .background. That will set the background modifiers. If we go back to the color directive, we can use node.modifier.background to access the value of it. Then if we set it, we'll set the color of the background, and if not, we'll set the font color.
[02:59] Let's try this. If you experience any problem with code reloading, just reload the page. I'm experiencing that for the font color. It will change it back to background, then the background is set. This works. Of course, this approach is not so flexible, because we cannot set both the color and the background color, but we can use do that using the node value.
[03:23] By still passing a string, we can pass an object. We can define the color and the background color. Let's go back to the color directive, and remove all of this that we don't need anymore. Now, we can directly set the background color and the color coming from the value of the node parameter.
[03:49] This is still working. To end up, I suggest you to take a look at the Vue typings so you can see everything we can use, not only for directives, but also for watch or computed properties.