Improving Your Application's Features with Vue Custom Directives

Vue.js is a popular JavaScript framework that provides a powerful and flexible way to build user interfaces. It comes with built-in directives like v-model and v-if which allow you to create a two-way binding on a form input element and control the visibility of elements based on a condition, respectively.

What are Vue Custom Directives?

Vue custom directives are a way to extend the behavior of Vue.js by providing a way to apply custom JavaScript logic to HTML elements in the DOM. Directives are used to modify the behavior of the element to which they are applied.

---

Usage of Custom Directives

Custom directives can be used whenever you need to add custom behavior or functionality to your Vue.js application that is not provided by built-in directives or other Vue.js features. For example:

• Change the position, background color and size of an element or add event listeners to an element

• Add a focus outline to elements that can be focused by keyboard navigation

• Animate the appearance or disappearance of an element or animate changes to the position or size of an element.

• Create a custom dropdown menu or a custom input field with validation.

How to Create Custom Directives in Vue.js

Creating custom directives in Vue.js is a straightforward process. A custom directive is defined as a JavaScript object with a set of properties and methods that define its behavior.

---

Get started

Let's create a custom directive that will trigger an event when clicked outside of the component in Vue 3's Composition API.

import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App)

app.directive("click-outside", {
    mounted(el, binding, vnode) {
        const vm = vnode.context
        const callback = binding.value
        el.clickOutsideEvent = function(event) {
            if (!(el === event.target || el.contains(event.target))) {
                return callback.call(vm, event)
            }
        }
        document.body.addEventListener("click", el.clickOutsideEvent)
    },
    unmounted(el) {
        document.body.removeEventListener("click", el.clickOutsideEvent)
    },
})

app.mount("#app")

Here, app.directive() method is used to register a new directive with the name click-outside globally. The beforeMount function is called when the directive is first applied to an element and the unmounted function is called when the directive is removed from the element.

Parameters:

• el: This parameter refers to the element to which the directive is attached.

• binding: This parameter contains information about the directive's arguments and modifiers if any.

• vnode: This parameter is the virtual node representing the element to which the directive is attached.

---

Usage

To use the click-outside directive in your template, you can simply add it to an element using the v-click-outside syntax:

<script setup>
    import { ref } from "vue"
    const showPopup = ref(false)

    function hidePopup() {
        showPopup.value = false
    }
</script>

<template>
    <div v-click-outside="hidePopup" class="popover-container">
        <button @click="showPopup=true">Click me</button>
        <div class="popover-content" :class="{ 'show': showPopup }">
            <p>Popover content goes here</p>
        </div>
    </div>
</template>

<style scoped>
    /* Button styles */
    .button {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 12px 24px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.2s ease-out;
    }

    /* Popover container styles */
    .popover-container {
        position: relative;
        display: inline-block;
    }

    /* Popover content styles */
    .popover-content {
        position: absolute;
        top: 120%;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        padding: 10px;
        font-size: 14px;
        line-height: 1.5;
        z-index: 999;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s, opacity 0.2s linear;
    }

    /* Show popover when showPopup is true */
    .popover-content.show {
        visibility: visible;
        opacity: 1;
    }
</style>

In the example, the v-clickoutside directive is attached to the div element that contains the popup content. When the user clicks outside of this element, the hidePopup method is called to hide the popup. The showPopup data property is used to show the visibility of the popup content.

---

Example

Check out the preview of custom vue click outside directive here or access the source base in GitHub vue-custom-directive.

---

Reference

https://vuejs.org/guide/reusability/custom-directives.html#object-literals

---

Conclusion

Custom directives in Vue are a powerful tool for extending the behavior of HTML elements and creating reusable code. With a bit of creativity and skill, you can use them to make your Vue applications more powerful, efficient, and elegant.

👏👏 By coming this far I hope you can use the vue custom directive in your project. So, I suggest you give your a try on your project and enjoy it!

Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions.