Write a Vue Component as a Class in TypeScript

Extend Vue Components in TypeScript

Use Vue Router in TypeScript

Create Type-Safe Vue Directives in TypeScript

Use Properties in Vue Components Using @Prop Decorator with TypeScript

Use Two-Way Binding in Vue Using @Model Decorator with TypeScript 

Watch for Changes in Vue Using the @Watch Decorator with TypeScript

Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript

Create your own Decorators in Vue with TypeScript

Use AOP in Vue Components with TypeScript and Kaop-ts

Decouple Dependencies Using IoC Containers in Vue with TypeScript and InversifyJS

Use TypeScript to Develop Vue.js Web Applications

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.

Course

Use TypeScript to Develop Vue.js Web Applications

Create Type-Safe Vue Directives in TypeScript

Share this video with your friends