# Clipboard API

Clipboard_API (opens new window)

# 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>