Clipboard

Vue Bootstrap 5 Clipboard

The mdbClipboard is a simple Vue directive which allows copying the given value to the user's clipboard.

Basic example

Import the directive from 'mdb-vue-ui-kit' and add mdbClipboard to the directives object. Attach the directive to an element and the passed value will be copied to the user's clipboard once it's clicked.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae purus faucibus ornare suspendisse. Eu mi bibendum neque enim tortor at auctor urna. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Ac tortor dignissim convallis aenean et. 

        
            
            <template>
              <p ref="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Vitae purus faucibus ornare suspendisse. Eu mi bibendum neque
                egestas congue quisque egestas. Feugiat sed lectus vestibulum
                mattis ullamcorper. Sit amet porttitor eget dolor. Ultrices
                sagittis orci a scelerisque purus semper. Erat pellentesque
                adipiscing commodo elit at imperdiet dui accumsan sit. Aliquet
                enim tortor at auctor urna. Semper feugiat nibh sed pulvinar
                proin gravida hendrerit lectus a. Ac tortor dignissim convallis
                aenean et.</p>
               <MDBBtn class="mb-2" color="primary" v-mdb-clipboard="value">Copy to clipboard</MDBBtn>
               <MDBTextarea label="Type here text to copy" rows="4" v-model="textareaValue" />
            </template>
          
        
    
        
            
            <script>
              import { ref } from "vue";
              import { MDBBtn, MDBTextarea, mdbClipboard } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBBtn,
                  MDBTextarea,
                },
                directives: {
                  mdbClipboard
                },
                setup() {
                  const value = ref('');

                  return { value }
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { ref } from "vue";
              import {
                MDBBtn,
                MDBTextarea,
                mdbClipboard as vMdbClipboard
              } from "mdb-vue-ui-kit";

              const value = ref('');
            </script>

Copy from element

Import the directive from 'mdb-vue-ui-kit' and add mdbClipboard to the directives object. Attach the directive (without value) to an element and it will be copied to the user's clipboard once it's clicked.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae purus faucibus ornare suspendisse. Eu mi bibendum neque egestas congue quisque egestas. Feugiat sed lectus vestibulum mattis ullamcorper. Sit amet porttitor eget dolor. Ultrices sagittis orci a scelerisque purus semper. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Aliquet enim tortor at auctor urna. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Ac tortor dignissim convallis aenean et. 

        
            
             <template>
               <p v-mdb-clipboard>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Vitae purus faucibus ornare suspendisse. Eu mi bibendum neque
                egestas congue quisque egestas. Feugiat sed lectus vestibulum
                mattis ullamcorper. Sit amet porttitor eget dolor. Ultrices
                sagittis orci a scelerisque purus semper. Erat pellentesque
                adipiscing commodo elit at imperdiet dui accumsan sit. Aliquet
                enim tortor at auctor urna. Semper feugiat nibh sed pulvinar
                proin gravida hendrerit lectus a. Ac tortor dignissim convallis
                aenean et.</p>
               <MDBTextarea label="Type here text to copy" rows="4" v-model="textareaValue" />
             </template>
           
        
    
        
            
            <script>
              import { ref } from "vue";
              import { MDBTextarea, mdbClipboard } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBTextarea,
                },
                directives: {
                  mdbClipboard
                },
                setup() {
                  const textareaValue = ref("");
                    
                  return { textareaValue }
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { ref } from "vue";
              import { MDBTextarea, mdbClipboard as vMdbClipboard } from "mdb-vue-ui-kit";

              const textareaValue = ref("");
            </script>

Clipboard - API

Import

        
            
          <script>
            import {
              mdbClipboard
            } from 'mdb-vue-ui-kit';
          </script>