Clipboard MDB Pro component

Vue Bootstrap Clipboard - 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-clipboard is a simple Vue directive which allows copying the given value to the user's clipboard.

Basic usage

Step 1: Import the directive from 'mdbvue'

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

Step 2: Add mdbClipboard to the directives object

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

Step 3: Attach the directive to an element - the passed value will be copied to the user's clipboard once it's clicked

        
            
      <template>
        <mdb-btn v-mdb-clipboard="value" />
      </template>
      
        
    

        
            
      <script>
        import {
          mdbClipboard,
          mdbBtn
        } from "mdbvue";
        export default {
          directives: {
            mdbClipboard
          },
          components: {
            mdbBtn
          },
          data() {
            return {
              value: "Copy me!"
            };
          }
        };
      </script>