Table of Contents

URL: https://www.progressiverobot.com/vuejs-ripple-things/

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

add illustration for: 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:

				
					
[label 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 =&gt; h(App)

});

Adding Ripples

You can now add ripples to any component using the <^>v-ripple<^> directive:

				
					
&lt;button v-ripple&gt;Button Example&lt;/button&gt;

And customize the color:

				
					
&lt;button v-ripple="'rgba(200, 10, 10, 0.2)'"&gt;Creepy Red Button Example&lt;/button&gt;

Change the transition speed:

				
					
&lt;button v-ripple.200&gt;ReallyFastButtonExample&lt;/button&gt;

Or even trigger it on mouseover!

				
					
&lt;button v-ripple.mouseover&gt;C'mere mouse! (Example)&lt;/button&gt;