Vue Bootstrap Click Outside MDB Pro component

Vue Click Outside - 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-click-outside is a custom directive which allows watching clicks outside the container.

Live Preview

Basic usage

Step 1: Import the directive from 'mdbvue'

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

Step 2: Add mdbClickOutside to the directives object 

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

Step 3: Attach the directive to any html element or component. 

        
            
      <template>
        <mdb-btn v-mdb-click-outside="handleOutsideClick" color="success">Click outside me</mdb-btn>
      </template>
      
        
    
        
            
      <script>
        import {
          mdbBtn,
          mdbClickOutside
        } from "mdbvue";
        export default {
          components: {
            mdbBtn
          },
          directives: {
            mdbClickOutside
          },
          data() {
            return {
              outsideClicks: 0
            }
          },
          methods: {
            handleOutsideClick() {
              this.outsideClicks++;
            }
          }
        };
      </script>

Step 4: If you wish to use the mousedown event instead of the default click, use :mousedown modifier: 

        
            
      <template>
        <mdb-btn v-mdb-click-outside:mousedown="handleOutsideClick" color="success">Click outside me</mdb-btn>
      </template>
      
        
    
        
            
      <script>
        import {
          mdbBtn,
          mdbClickOutside
        } from "mdbvue";
        export default {
          components: {
            mdbBtn
          },
          directives: {
            mdbClickOutside
          },
          data() {
            return {
              outsideClicks: 0
            }
          },
          methods: {
            handleOutsideClick() {
              this.outsideClicks++;
            }
          }
        };
      </script>