Material Ripple Effect Directive For Vue.js – v-wave


A full-featured Material Design ripple click animation implementation that is easy to use as a Vue.js directive.

How to use it:

1. Import the v-wave.

import Vue from 'vue'
import VWave from 'v-wave'

2. Register the v-wave

// register

// for nuxt.js
export default {
  modules: ['v-wave/nuxt']

3. Attach the material ripple effect to an element.

<button v-wave>Click me!</button>

4. All possible options.

  directive: 'wave',
  color: 'currentColor',
  initialOpacity: 0.2,
  finalOpacity: 0.1,
  duration: 0.4,
  easing: 'ease-out',
  cancellationPeriod: 75


Material Ripple Effect Directive For Vue.js - v-wave


v1.3.3 (11/15/2021)

  • Bug Fixes

v1.3.2 (11/08/2021)

  • Bug Fixes

v1.3.1 (07/22/2021)

  • rewrite vue3 check

v1.3.0 (07/08/2021)

  • Bug Fixes

v1.2.7 (02/13/2021)

  • Bug Fixes

v1.2.6 (01/29/2021)

  • fix: doesn’t respect border-radius in Safari

v1.2.5 (01/27/2021)

  • fix: invalid type declarations due to path aliases

v1.2.3 (01/20/2021)

  • fix: incorrect handling of wave count

v1.2.0 (01/16/2021)

  • fix: remove auto-install that didn’t work right

Download Details:

Author: justintaddei

Live Demo:

Download Link:

Official Website:

Install & Download:

You Might Be Interested In:

Add Comment