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

Folders and files

NameName
Last commit message
Last commit date

Latest commit

42e4527 · Dec 17, 2022
Dec 16, 2022
Jul 6, 2017
Dec 17, 2022
Jul 6, 2017
May 10, 2020
Apr 6, 2019
Jul 5, 2017
Dec 17, 2022
Dec 16, 2022
Dec 16, 2022
Dec 16, 2022
Dec 16, 2022
Dec 16, 2022

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