Vue.js 3 Custom Directives

Vue.js Directives are special HTML attributes that allow us to manipulate the DOM. Directives are very powerful and we use them every day.

Common directives are v-if, v-for and v-model.

The course covers all you need to know to be able to create your own, custom vue.js directives. In the course, we create a couple different directives to showcase the possibilities and power of custom vue.js directives.

This is the updated Vue.js 3 Version of our original Custom Vue Directives course.

The Directives

v-color changes the CSS color of the element every 500 milliseconds.

v-click-outside allows us to attach an event handler to when a user clicks outside an element. Perfect for modals and pop-over menus, toolboxes etc.

While the first might seem silly, it's a great demonstration of the directives API and how you create a Vue.js directive. The possibilities with these patterns are very powerful.

The course also teaches you what you need to know about directive modifiers and hooks.