Vue js Custom Directives and Plugins

Tailored Behavior & Extensions in Vue

Vue empowers developers to stretch the core framework through individually crafted directives and expandable plugin modules, enabling creative control and deeper flexibility.

Personal Directives — Inject Your Own Markup Logic

Custom instructions in Vue are user-defined markers that enhance DOM manipulation. While Vue already provides built-in ones like v-if and v-model, we can formulate our own for specific interactive effects.

Example: Apply Highlighting Automatically

Let’s develop a directive that applies emphasis when attached to HTML content:

// highlight.js 
export default {   
     mounted(el, binding) {     
          el.style.backgroundColor = binding.value || 'yellow';   
     } 
}

This directive simply paints the element using the specified tone or a fallback hue.

How to Employ It

First, import it inside a component or main file:

// main.js 
import { createApp } from 'vue'; 
import App from './App.vue'; 
import highlight from './directives/highlight.js';  

const app = createApp(App); 
app.directive('highlight', highlight); 
App.mount('#app');

Then, use it in a template:

<p v-highlight="'lightgreen'">Notice me!</p>

Here, the paragraph receives a green tint through the directive's behavior.

Full Setup Recap:

• el refers to the bound element.
• binding.value carries the custom color.
• mounted runs once, after the element is added to the document.

Vue Plugins — Framework Expansion Kits

Plugins let you broaden Vue’s capabilities by injecting global assets, registering reusable features, or altering app behavior.

Crafting a Basic Plugin

Let’s make a plugin that introduces a greeting function accessible throughout all components:

// greetPlugin.js 
export default {   
   install(app, options) {     
       app.config.globalProperties.$sayHello = function(name) {       
            return `Hello, ${name}! 🎉`;     
       };   
    } 
}

Integrating the Plugin

In your startup configuration:

// main.js 
import { createApp } from 'vue'; 
import App from './App.vue'; 
import greetPlugin from './plugins/greetPlugin.js';  

const app = createApp(App); 
app.use(greetPlugin); 
App.mount('#app');

Now, inside any component, you can call:

this.$sayHello('Parmi') // Outputs: Hello, Parmi! 🎉 

Plugin Capabilities at a Glance:

• Add global properties
• Register directives or components
• Provide mixin behaviors
• Access lifecycle events
• Integrate external utilities

Differences Between Directives and Plugins

Final Thoughts

By mastering both directives and plugins, Vue authors can shape precise features and scale their applications smoothly. This duo offers the tools to manipulate structure (DOM) and extend app-level functionality in a unified, maintainable way.