Vue Bootstrap Intersection Observer MDB Pro component

Vue Intersection Observer - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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