Add Material Ripples to Your Vue.js Components

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!