Material Design Ripple Click/Tap Effect In Vue

Install & Download:

A Vue directive that applies a Material Design inspired ripple effect to components when clicked.

1. Import and register the directive.

import Vue from "vue";
import Ripple from "vue-material-design-ripple";
import "vue-material-design-ripple/dist/vue-material-design-ripple.css";

Vue.directive("ripple", Ripple);

2. Add a ripple click/tap effect to your element.

<template>
  <div class="clickme" :style="{color}" v-ripple="{center,class: rippleClass}">
    ...
  </div>
</template>