Resize MDB Pro component

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

Live Preview

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>