Vue.js Custom Directives with Object Literals

Last Updated : 12 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.

Vue.js Custom Directives with Object Literals allows us to pass multiple values to the directive as a JSON object. In the binding value, we will receive the values by their name.

Syntax: Passing the multiple values as an object literal to the directive as follows:

<div
  v-decorate="{
    margin: '24px',
    borderRadius: '4px',
    backgroundColor: 'teal',
  }">
</div>

Example: In the following example, we have a directive to style a div container and to style an input. We have provided the fields which we may or may not use on your choice. This provides an easy way to apply styles to our elements and can be extended further.

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 3: In the script section of the App.vue file, create a custom directive and name it as decorate. In the mounted section and the updated section, add the element and the binding fields. Now modify the values accordingly. In this tutorial, we are going to modify the border-radius, colour, background color, and the placeholder text. Finally, export the directive.

App.vue

<script> 
const decorate = { 
  mounted: (el, binding) => { 
    el.style.borderRadius = binding.value.borderRadius; 
    el.style.backgroundColor = binding.value.backgroundColor; 
    el.style.margin = binding.value.margin; 
    el.placeholder = binding.value.placeholder; 
    el.style.color = binding.value.color; 
  }, 
  updated: (el, binding) => { 
    el.style.borderRadius = binding.value.borderRadius; 
    el.style.backgroundColor = binding.value.backgroundColor; 
    el.style.margin = binding.value.margin; 
    el.placeholder = binding.value.placeholder; 
    el.style.color = binding.value.color; 
  }, 
}; 
export default { 
  directives: { 
    decorate, 
  }, 
}; 
</script>

Step 4: In the template section of the App.vue file, add an input and div element and add the values as you wish.

App.vue

<template> 
  <center> 
    <h1 style="text-align: center;  
        color: green"> 
        GeeksforGeeks 
    </h1> 
    <strong> 
        Vue.js Custom Directives with Object Literals  
    </strong> 
    <br /> 
  </center> 
  <center> 
    <div v-decorate="{ 
            margin: '24px', 
            borderRadius: '4px', 
            backgroundColor: 'teal', 
          }"> 
      Welcome to GeeksforGeeks 
    </div> 
    <input type="text"
             v-decorate="{ placeholder: 'Green Input',  
                           color: 'green' }"/> 
  </center> 
</template>

Here is the full code.

App.vue

<script> 
const decorate = { 
  mounted: (el, binding) => { 
    el.style.borderRadius = binding.value.borderRadius; 
    el.style.backgroundColor = binding.value.backgroundColor; 
    el.style.margin = binding.value.margin; 
    el.placeholder = binding.value.placeholder; 
    el.style.color = binding.value.color; 
  }, 
  updated: (el, binding) => { 
    el.style.borderRadius = binding.value.borderRadius; 
    el.style.backgroundColor = binding.value.backgroundColor; 
    el.style.margin = binding.value.margin; 
    el.placeholder = binding.value.placeholder; 
    el.style.color = binding.value.color; 
  }, 
}; 
export default { 
  directives: { 
    decorate, 
  }, 
}; 
</script> 
<template> 
  <center> 
    <h1 style="text-align: center; color: green">GeeksforGeeks</h1> 
    <strong> Vue.js Custom Directives with Object Literals </strong> 
    <br /> 
  </center> 
  <center> 
    <div
      v-decorate="{ 
        margin: '24px', 
        borderRadius: '4px', 
        backgroundColor: 'teal', 
      }" 
    > 
      Welcome to GeeksforGeeks 
    </div> 
    <input
      type="text"
      v-decorate="{ placeholder: 'Green Input', color: 'green' }"
    /> 
  </center> 
</template> 