Warning: session_start(): open(/var/lib/php/fpm/session/sess_qmk714sa4lnsbu7p8miuosdja5, O_RDWR) failed: Permission denied (13) in /var/www/tst02/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Warning: session_start(): Failed to read session data: files (path: /var/lib/php/fpm/session) in /var/www/tst02/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Notice: Undefined index: HTTP_REFERER in /var/www/tst02/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
MDB Vue Clipboard Directive - Bootstrap 4 & Material Design - Material Design for Bootstrap

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.

Live Preview

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>