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

Attach v-mdb-clipboard to button (or whatever you want to be a trigger of copy to clipboard) and pass ref from element (or v-model) - for addition you got to add argument to directive which matches to a name of variable with content. With inputs you got to add input modyfier which is going after argument with name. 

        
            
            <template>
              <MDBInput v-model="copyInput" />
              <MDBBtn
                v-mdb-clipboard:copyInput.input="copyInput"
                color="primary"
              >
                copy
              </MDBBtn>
            </template>
          
        
    
        
            
            <script>
              import { ref } from "vue";
              import { MDBBtn, MDBInput, mdbClipboard } from "mdb-vue-ui-kit";

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

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

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

Copy from element

Copying from element (div, p or others) does not require adding modyfier (like input).

Here is text to copy!
        
            
              <template>
                <MDBBtn
                  v-mdb-clipboard:copyTextContent="copyTextContent"
                  class="mb-4"
                  color="primary"
                >
                  Copy
                </MDBBtn>
                <p class="text-start" ref="copyTextContent2">
                  Here is text to copy!
                </p>
              </template>
           
        
    
        
            
            <script>
              import { ref } from "vue";
              import { MDBBtn, mdbClipboard } from "mdb-vue-ui-kit";

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

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

Copy hardcoded value

By passing a string to v-mdb-clipboard you can hardcode value to copy.

Copy hardcoded value instead of text content. 
        
            
              <template>
                <MDBBtn
                  v-mdb-clipboard="'This hardcoded text'"
                  class="mb-4"
                  color="primary"
                >
                  Copy
                </MDBBtn>
                <p class="text-start">
                  Copy hardcoded value instead of text content.
                </p>
              </template>
           
        
    
        
            
            <script>
              import { ref } from "vue";
              import { MDBBtn, mdbClipboard } from "mdb-vue-ui-kit";

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

Feedback example

An example of triggering feedback using an alert and reference.

        
            
              <template>
                <MDBAlert
                  v-model="alert"
                  id="alert-primary"
                  color="primary"
                  position="top-right"
                  stacking
                  width="300px"
                  appendToBody
                  autohide
                  :delay="5000"
                >
                  Text copied!
                </MDBAlert>
                <MDBInput label="Type here text to copy" v-model="feedbackInput" />
                <MDBBtn
                  class="mb-4"
                  color="primary"
                  @click="alert = true"
                  v-mdb-clipboard:feedbackInput.input="feedbackInput"
                >
                  {{ alert === true ? "Copied!" : "Copy" }}
                </MDBBtn>
              </template>
           
        
    
        
            
            <script>
              import { ref } from "vue";
              import {
                MDBBtn,
                MDBAlert,
                MDBInput,
                mdbClipboard
              } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBBtn,
                  MDBAlert,
                  MDBInput,
                },
                directives: {
                  mdbClipboard
                },
                setup() {
                  const feedbackInput = ref("");
                  const alert = ref(false);

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

              const feedbackInput = ref("");
              const alert = ref(false);
            </script>

Clipboard - API

Import

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