euvl/v-clipboard

Simple and powerful clipboard plugin for Vue.js 2 and 3

Supporters

Check them out.

Install

npm install --save v-clipboard

yarn add v-clipboard

import Vue from 'vue'
import Clipboard from 'v-clipboard'

Vue.use(Clipboard)

Usage

When an element that contains v-clipboard directive is clicked, the value of value will be copied into clipboard.

---

Copying static value (directive should receive actual value):

<button v-clipboard="value">
  Copy to clipboard
</button>

<button v-clipboard="'some text'">
  Copy to clipboard
</button>

Copying dynamic value (directive should recieve a function that returns value):

<button v-clipboard="() => value">
  Copy to clipboard
</button>

Copying anything in your methods:

this.$clipboard(value)

Without plugin:

import { Clipboard } from 'v-clipboard'

await Clipboard.copy(value)

Events

<button
  v-clipboard="foo"
  v-clipboard:success="clipboardSuccessHandler"
  v-clipboard:error="clipboardErrorHandler"
>
  Copy to clipboard
</button>

{
  methods: {
    clipboardSuccessHandler (value, event) {
      console.log('success', value)
    },

    clipboardErrorHandler (value, event) {
      console.log('error', value)
    }
  }
}

How it works

copy / $clipboard is an async call. Firstly, library makes an attempt to update clibpoard using execCommand, if that operation is unsuccessful it makes an attemnt to use Navigator Clipboard API and automatically requests access, waits for access to be granted, then writes to clipboard.

Demo

https://codesandbox.io/s/epic-waterfall-17yet5?file=/src/App.vue

Compatibility