Vue Bootstrap Waves

Vue Waves - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

The mdb-waves is a custom directive which adds on-click ripple effect to any element.

Basic usage

Step 1: Import the directive from 'mdbvue'

        
            
      <script>
        import {
          mdbWaves
        } from "mdbvue";
      </script>
      
        
    

Step 2: Add mdbWaves to the directives object

        
            
      <script>
        import {
          mdbWaves
        } from "mdbvue";
        export default {
          directives: {
            mdbWaves
          }
        };
      </script>
      
        
    

Step 3: Attach the directive to any element.

        
            
      <template>
        <section class="d-flex justify-content-center">
          <div v-mdb-waves style="width: 200px; height: 100px; background-color: #c23636;"></div>
        </section>
      </template>
      
        
    

        
            
      <script>
        import {
          mdbWaves
        } from "mdbvue";
        export default {
          directives: {
            mdbWaves
          }
        };
      </script>
      
        
    

Options