Vue Bootstrap Click Outside MDB Pro component

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-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>