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>