Vue.js Custom Directives with Function Shorthand

Last Updated : 08 Apr, 2022

Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers to integrate Vue.js in any application at any stage.

The Custom Directives allow the developers to create and use some custom functions easily on the elements. Like the in-built directives that are like v-model, v-for, v-if, etc., we can create our own directives which will according to what we set it. It allows reusing some logic by having access to the lower level of DOM. We can also pass data to the custom directives.

The Custom Directives with Function Shorthand allow creating the directives when we have the same function if the item is mounted or updated. This doesn’t require any extra hooks and the directive is declared as a function.

Syntax: Declare the directive name and then declare the function itself. This is called whenever the element is mounted or updated.

const app = createApp(App);
app.directive("customDirective", (el, binding) => {
    // code for directive
});

Example: In the following example, we have a custom directive called input for the input elements to easily place the color and the placeholder text in the input elements. We will create the custom directive with function shorthand.

Step 1: Create a new Vue.js project with the npm node.js package manager using the following command.

npm init vue@latest

Enter the project name and preset the project as follows:

Project Structure: After successful installation, the following project structure will be formed.

Project Structure

Step 2: In the main.js file, before mounting, declare the directive with the name input and then change the placeholder and value according to the input.

main.js

import { createApp } from "vue"; 
import App from "./App.vue"; 
  
const app = createApp(App); 
app.directive("input", (el, binding) => { 
  console.log(binding.value); 
  el.placeholder = binding.value.placeholder; 
  el.style.color = binding.value.color; 
}); 
app.mount("#app");

Step 3: Inside the App.vue file template section, we can use the function shorthand in our input elements.

App.vue

<script> 
  export default { 
    name: "App", 
    components: {}, 
  }; 
</script> 
  
<template> 
  <center> 
    <h1 style="text-align: center;  
        color: green"> 
        GeeksforGeeks 
    </h1> 
    <strong> 
        Vue.js Custom Directives with Function Shorthand 
    </strong> 
    <br /> 
  </center> 
  <center> 
    <input 
      type="text"
      v-input="{ placeholder: 'Yellow Input', color: 'yellow' }"/> 
    <input 
      type="text"
      v-input="{ placeholder: 'Search Tutorials', color: 'green' }"/> 
  </center> 
</template>