# Clipboard API
# State
The useClipboard
function exposes the following reactive state:
import { useClipboard } from "vue-composable";
const { text, supported, write, read } = useClipboard();
State | Type | Description |
---|---|---|
supported | Boolean | Returns true if the browser has navigator.clipboard (opens new window) |
text | Ref<string | undefined> | Reactive text in clipboard, also updates the clipboard if changed |
data | Ref<DataTransfer | undefined> | Reactive data in clipboard, it does not update the clipboard on change |
# Example
# Methods
The useClipboard
function exposes the following methods:
import { useClipboard } from "vue-composable";
const { writeText, readText } = useClipboard();
Signature | Description |
---|---|
writeText | Writes text to the clipboard |
readText | Reads text from the clipboard |
write | Writes to the clipboard Clipboard.write() (opens new window) |
read | Reads from the clipboard Clipboard.read() (opens new window) |
# Code
<template>
<div>
<p>click the button to copy a random number</p>
<button @click="copy">copy</button>
<p>Check your dev tools to see what has been copied to your clipboard</p>
<p>You can also change the clipboard</p>
<input v-model="text" />
<div>
<p>Current clipboard:</p>
<p>{{ text }}</p>
</div>
</div>
</template>
<script>
import { useClipboard } from "vue-composable";
export default {
setup() {
const { text, writeText } = useClipboard();
function copy() {
writeText(Math.random().toString());
console.log(text.value);
}
return {
copy,
text,
};
},
};
</script>