Clipboard

The Clipboard API provides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the system clipboard. Access to the contents of the clipboard is gated behind the Permissions API; without user permission, reading or altering the clipboard contents is not permitted.

Note!

This API is designed to supersede accessing the clipboard using document.execCommand().

State

The useClipboard function exposes the following reactive state:

import { useClipboard } from 'vue-use-web';

const { text } = useClipboard();

State	Type	Description
text	string	the current text in the clipboard.

Methods

The useClipboard function exposes the following methods:

import { useClipboard } from 'vue-use-web';

const { write } = useClipboard();

write('hello world!');

Signature	Description
write(str: string)	Writes the given string it in the clipboard.

Use-cases

I'm sure you can think of multiple situations where you would like to copy the clipboard text or write some data into them. Mainly stuff like copying code in snippets, referral links, recovery codes or really any hard to remember text.

Example

<template>
  <div>
    <div @click="copy('568781')">Click here to copy the code: <em>568781</em></div>
    <div>Detected code: {{ text }}</div>
  </div>
</template>

<script>
import { useClipboard } from 'vue-use-web';

export default {
  setup() {
    const { text, write } = useClipboard();

    return { text, copy: write };
  }
};
</script>