Though it may appear that this week has been a fairly slow week for Vue.js news, at least one important, critical library has come into the light. That library is vue-ripple-directive! Once you’ve used it you’ll wonder how you ever lived without it. It provides your app with the ability to add Material Design Ripples to any component with a simple directive.
Ready to get started?
Installation
Install vue-ripple-directive via Yarn or NPM:
# Yarn
$ yarn add vue-ripple-directive
# NPM
$ npm install vue-ripple-directive --save
Then register the directive:
main.js
import Vue from 'vue';
import Ripple from 'vue-ripple-directive';
import App from 'App.vue';
// Register the ripple directive.
Vue.directive('ripple', Ripple);
new Vue({
el: '#app',
render: h => h(App)
});

This affiliate banner helps support the site 🙏
Adding Ripples
You can now add ripples to any component using the v-ripple directive:
<button v-ripple>Button Example</button>
And customize the color:
<button v-ripple="'rgba(200, 10, 10, 0.2)'">Creepy Red Button Example</button>
Change the transition speed:
<button v-ripple.200>ReallyFastButtonExample</button>
Or even trigger it on mouseover!
<button v-ripple.mouseover>C'mere mouse! (Example)</button>
Boom! I fully expect this will become an indispensable part of your tool set 😜. Enjoy!