Simon HoldorfIntroduction
One of the greatest features of Vue.js is that it comes with built-in directives much as the original AngularJS (One reason why people think that Vue is what Angular should have been...). Those directives make your lives as frontend devs much easier but what's even better is that one can write own, custom directives. So in this post I am going to show you 10 cool directives made by the fantastic Vue Community that you can use in your projects right away to save you time and effort and bring your Vue game to the next level.
Vue-Lazyload
An awesome package with more than 5000 Stars on Github. Vue-Lazyload by Hilongjw lets you lazyload your images without hassle!
Example Code
<template>
<img v-lazy="https://www.example.com/example-image.jpg">
</template>
Repository
Demo
Vue-Infinite-Scroll
This is a great and easy to implement directive if you want to load new elements on your webpage when visitors reach the bottom.
The method bound to v-infinite-scroll will be executed when the bottom of the element reaches the bottom of the viewport. Cool, right?
Example Code
<template>
/* your website code */
<div
v-infinite-scroll="onLoadMore"
infinite-scroll-disabled="busy"
infinite-scroll-distance="10"
></div>
<template>
<script>
export default {
data() {
return {
data [],
busy: false,
count: 0
}
},
methods: {
onLoadMore() {
this.busy = true;
setTimeout(() => {
for (var i = 0, j = 10; i < j; i++) {
this.data.push({ name: this.count++ });
}
this.busy = false;
}, 1000);
}
}
}
</script>
Repository
Vue-Focus
Sometimes in web development it can be tricky to manage input focus. Vue-Focus comes to the rescue and lets you manage focus directly from the view model.
Example Code
<template>
<button @click="focusedElement = true">Input gets Focus</button>
<input type="text" v-focus="focusedElement">
</template>
<script>
export default {
data: function() {
return {
focusedElement: false,
};
},
};
</script>
Demo
Repository
Vue-Blur
Vue-Blur is a great choice if you want to blur out certain sections of your website for let's say unregistered visitors. It also comes with options to customize parameters like opacity, filter and transition between states.
Example Code
<template>
/* Use this with a boolean value (true/false) */
<div v-blur="isBlurred"></div>
/* Use this with an object that uses values from the config */
<div v-blur="blurConfig"></div>
</template>
<script>
export default {
data () {
return {
isBlurred: true, // activate and deactivate based on a boolean value
blurConfig: {
isBlurred: false, // activate and deactivate based on a boolean value and also provide a config
opacity: 0.3,
filter: 'blur(1.2px)',
transition: 'all .3s linear'
}
}
}
}
};
</script>
Demo
Repository
V-Clipboard
This is a smart little package that you can use to copy values from elements to the user's clipboard without implementing tons of logic.
Example Code
/* When an element that contains the v-clipboard directive is clicked, the value of valueToCopy will be copied into clipboard. */
<template>
<button v-clipboard='valueToCopy'>Copy to clipboard</button>
</template>
<script>
export default {
data() {
return {
valueToCopy: "Some Text"
}
}
};
</script>
Repository
Vue-ScrollTo
Scrolling elements was never easier! You can listen to click events on elements and have the browser scroll to a given tag which is awesome for navigation inside of a web application!
Example Code
<template>
<button v-scroll-to="'#element'">Scroll to #element as the target</button>
<h1 id='element'>This will be the scrolling target</h1>
</template>
Demo
Repository
V-Hotkey
This cool custom directive made by Dafrok allows you to easily bind hotkeys to your components. Hiding or showing components on key strokes? Nothin easier than that!
Example Code
<template>
<div v-hotkey="keymap" v-show="show">
Press `ctrl + esc` to toggle me! Hold `enter` to hide me!{' '}
</div>
</template>
<script>
export default {
data () {
return {
show: true
}
},
methods: {
toggle () {
this.show = !this.show
},
onShow () {
this.show = true
},
onHide () {
this.show = false
}
},
computed: {
keymap () {
return {
'ctrl+esc': this.toggle,
'enter': {
keydown: this.onHide,
keyup: this.onShow
}
}
}
}
}
</script>
Repository
V-Click-Outside
This is an awesome directive to react to click events on elements without stopping the event propagation. This comes in handy for closing dialogues, menus, etc.
Example Code
<template>
<div v-show="show" v-click-outside="onClickOutside">
Hide the element if a click event outside is triggered
</div>
</template>
<script>
export default {
data() {
return {
show: true
};
},
methods: {
onClickOutside() {
this.show = false;
}
}
};
</script>
Demo
Repository
V-Scroll-Lock
This smart directive helps you to prevent your website from scrolling when something like a modal/lightbox/flyout is open. This is especially useful when dealing with multiple devices!
Example Code
<template>
<div class="modal" v-if="open">
<button @click="closeModal">X</button>
<div class="modal-content" v-scroll-lock="open">
<p>A bunch of scrollable modal content</p>
</div>
</div>
</template>
<script>
export default {
name: 'Modal',
data () {
return {
open: false
}
},
methods: {
openModal () {
this.open = true
},
closeModal () {
this.open = false
}
}
}
</script>
Demo
Repository
V-Tooltip
This cool package by Akryum provides you with an awesome tooltip directive. Just bind some text to v-tooltip and and you are ready.
Example Code
<template>
<div>
<p>
<input v-model="message" placeholder="Message">
</p>
<p>
<span v-tooltip="message">{{ message }}</span>
</p>
</div>
</template>
Repository
Conclusion
In this article I curated 10 custom Vue directives that you might want to use in your existing our future projects or just take and play around a bit. They key takeaway here is when working with Vue.js you do not have to reinvent the wheel every time thanks to custom directives and the wonderful community. If you have other directives you would want to recommend to others please leave a comment. Also don't forget to follow me for more upcoming posts!
