Software Development
Jacek Ludzik
Jacek Ludzik
Product Designer
2021-12-15

Custom Directives in Vue 3

Before I start I'd like to make sure you are familiar with Vue 3. Here are some links that might be helpful:

Vue 3 basics: https://v3.vuejs.org/guide/migration/introduction.html#overview

Couple words about directives: <https://v3.vuejs.org/guide/migration/introduction.html#template-directives

Example of custom directive made by Vuetify: https://vuetifyjs.com/en/directives/click-outside/

Documentation of custom directives: https://v3.vuejs.org/guide/migration/custom-directives.html#_3-x-syntax

If you already mastered all these concepts, just enjoy the article!

No doubt Vue.js developers think that 3rd version of Vue is a game-changer. When such big changes are provided to any framework, it's pretty obvious that syntax or the way we code logic would change. Besides Composition API there are also some visible changes in a bit more advanced concepts.

I'm rather a React guy but when I discovered the directives concept widely used in Vue, I was just impressed. Then, while working on some internal project for our team, I discovered CUSTOM DIRECTIVES. I just wanted to try how they'll work in Vue 3 so I started coding. 

Changes in available hooks

First of all, custom directives changed in terms of available hooks. In the previous Vue version you were able to use:

  • bind - called once when the directive is bound to an element
  • inserted - when the bound element is inserted into its parent node
  • update - when the element updates (but any children haven’t yet)
  • componentUpdated -  after the children have also updated
  • unbind - called once when the directive is unbound from an element

From now you can easily use:

  • created - before the element’s attributes or event listeners are applied
  • beforeMount - it’s basically bind hook from Vue 2
  • mounted - new name for inserted
  • beforeUpdate – called before the element itself is updated (like Vue 3 onUpdated hook)
  • updated – new name for componentUpdated hook
  • beforeUnmount – called before an element is unmounted (like onUnmounted)
  • unmounted – same as old unbind hook

All these hooks open wide possibilities to manipulate DOM directly. Let’s take a look at some examples to visualize it.

I will define a v-chip directive that will transform your DOM element to UI chip.

kawałek kodu 1

Now let’s imagine, we need to use some custom color other than black. I’ll need to pass some value to this directive. Vue in this case accepts both reactive and static values. 

Pass reactive value:

kawałek kodu 2

Pass static value:

kawałek kodu 3

A noticeable difference between these syntaxes is that if you want to pass a static value it needs to be wrapped into both double quote and single quote.

Custom directives also allow the use of arguments. Let’s round our chip a bit.

kawałek kodu 4

Then, in the component when I update syntax with `v-chip:rounded`. My chip will get beautiful smooth corners.

my chip rounded

Summing up

Most important things you have to remember about custom directives:

  • If you pass some value to a directive it should be either object or single-quote string wrapped in double quotes. In v-chip=’#000’ case, binding.value will be undefined
  • You should define your custom directive name without ‘v-’ prefix

Read more:

JavaScript Is Totally Dead. Some Dude on the Internet

A Deeper Look at the Most Popular React Hooks

Software Projects Where You Can Use JavaScript