Here is a nice library which I found recently called vue-ripple-directive. This is basically a directive which can be used for any element in which you like to achieve a ripple effect.

How to use?

First install using npm install vue-ripple-directive --save. Once installed, you will need to register the directive by using Vue.directive('ripple', Ripple);.

Here is a sample file:

import Vue from 'vue';
import Ripple from 'vue-ripple-directive';
import App from 'App.vue';

Vue.directive('ripple', Ripple);

new Vue({
  el: '#app',
  render: h => h(App)
});

That’s basically all you need to do. Now you can use it like any other directive.

<button v-ripple>Click me</button>

The default ripple color is rgba(0, 0, 0, 0.35) but you can pass any HEX, RGB or RGBA values. It works best with RGBA and low opacity.

<button v-ripple="'rgba(255, 255, 255, 0.5)'">Custom color</button>

You can also change the transition speed like this:

 //150ms transition
<button v-ripple.150>Fast ripple</button>

The Ripple animation is triggered on click by default but it can also be triggered on mouse over:

<button v-ripple.mouseover>Hover me</button>