Skip to content

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

License

Notifications You must be signed in to change notification settings

euvl/v-clipboard

Repository files navigation

npm npm

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