Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Clipboard plugin

Related course:
Fullstack Vue: The Complete Guide to Vue.js

Clipboard plugin for vue.js. This plugin lets you use the clipboard from vue.js
No dependencies, less than 2kb minified.

Install

You need npm to install this.

npm install --save v-clipboard

In your app:

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

Vue.use(Clipboard)

There are 2 ways of using this plugin:

Using v-clipboard="mymodel" directive.
When an element that contains v-clipboard directive is clicked, the value of mymodel will be copied into clipboard.
Using this.$clipboard(value) function.

Demo

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>

Compatability

This is compatible with most browsers except Opera Mini and Android 56.

compatability

Github: https://github.com/euvl/v-clipboad


© vuejsexamples.net - Privacy Policy - Cookie Policy