Clipboard MDB Pro component

Vue Bootstrap Clipboard - 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-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>