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.

Note: This directive should be used together with normal script syntax. 

<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('');

  defineExpose({ copyInput });
</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="copyTextContent">
    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("");

  defineExpose({ copyTextContent });
</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,
    MDBAlert,
    MDBInput,
    mdbClipboard as vMdbClipboard
  } from "mdb-vue-ui-kit";

    const feedbackInput = ref("");
    const alert = ref(false);

    defineExpose({ feedbackInput, alert });
</script>

Clipboard - API

Import

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