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).
<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.
<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>