Vue.js Clipboard plugin

(No dependencies, less than 2kb minified)

Install

npm install --save v-clipboard

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

Vue.use(Clipboard)

Use

There are 2 ways of using this plugin:

  1. Using v-clipboard="mymodel" directive.

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

  1. Using this.$clipboard(value) function.

This one is simple :-)

Examples

Option 1: Using template only.

<input v-model="foo">

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

Option 2: Using javascript call.

<button @click="copy">
  Copy to clipboard
</button> 

methods: {
  copy () {
    this.$clipboard("Baaaaaaaaar")
  }
}

Events

<button v-clipboard="foo"
        @copy="clipboardSuccessHandler"      // Success event handler 
        @copy-error="clipboardErrorHandler"> // Error event handler
  Copy to clipboard
</button>

GitHub