Clipboard MDB Pro component

Vue Bootstrap Clipboard - Bootstrap 4 & Material Design

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>