Vue Bootstrap Intersection Observer MDB Pro component

Vue Intersection Observer - 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-intersect is a custom directive which allows calling a method when an element is visible on the screen.

Basic usage

Step 1: Import the directive from 'mdbvue'

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

Step 2: Add mdbIntersect to the directives object

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

Step 3: Attach the directive to an element and pass a callback

        
            
          <template>
            <div v-mdb-intersect="callback">...</div>
          </template>
        
        
    

        
            
          <script>
            import { mdbIntersect } from "mdbvue";
            export default {
              directives: {
                mdbIntersect
              },
              methods: {
                callback() {
                  //...
                }
              }
            };
          </script>
        
        
    

Arguments

Modifiers