Material Ripples     

Material Ripple effect can easily be added to any DOM element (or component) through the v-ripple Quasar directive. Following these steps:

1. Make sure your DOM element or component has CSS position: relative or Quasar CSS helper class relative-position attached to it.

2. Add v-ripple directive to it.

The color of the ripples are determined by the text color (CSS ‘color’ prop) of the DOM element.

Installing

Edit /quasar.conf.js:

framework: {
  directives: ['Ripple']
}

Basic Usage

<div class="relative-position" v-ripple>
  ....
</div>

Trigger only for one Quasar theme

For this you need to specify mat or ios directive modifiers like this:

<!-- Only for Quasar Material theme -->
<div v-ripple.mat class="relative-position">...</div>

<!-- Only for Quasar iOS theme -->
<div v-ripple.ios class="relative-position">...</div>

Dynamic Disable

If for some reason you have a scenario where the ripples need to be disabled, then you can assign a Boolean as value for the directive.

<template>
  <div
    v-ripple="rippleEnabled"
    class="relative-position"
  >
    <q-checkbox
      v-model="rippleEnabled"
      label="Enable Ripples"
    />
    .....
  </div>
</template>

<script>
export default {
  data () {
    return {
      rippleEnabled: true
    }
  }
}
</script>

When your Vue scope variable rippleEnabled becomes Boolean false then the ripple will be disabled.
You can also combine this with the mat and ios modifiers.