Resize MDB Pro component

Vue Bootstrap Resize - 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-resize directive calls the given method every time user resizes the window

Basic usage

Step 1: Import the directive from 'mdbvue'

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

Step 2: Add mdbResize to the directives object

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

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

        
            
      <template>
        <div v-mdb-resize="handleResize" />
      </template>
      
        
    

        
            
      <script>
        import {
          mdbResize
        } from "mdbvue";
        export default {
          directives: {
            mdbResize
          },
          methods: {
            handleResize() {
              console.log('window resized!')
            }
          }
        };
      </script>
      
        
    

Step 4: If you need to call the given function not only on resize event, but also immediately after the directive has been inserted, use :start modifier

        
            
      <template>
        <div v-mdb-resize:start="handleResize" />
      </template>
      
        
    

        
            
      <script>
        import {
          mdbResize
        } from "mdbvue";
        export default {
          directives: {
            mdbResize
          },
          methods: {
            handleResize() {
              console.log(
                'This message will be displayed once the directive has been inserted and every time user resizes the window'
                )
            }
          }
        };
      </script>