Add Material Ripples to Your Vue.js Components

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:

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)
});

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>