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.


You need npm to install this.

npm install --save v-clipboard

In your app:

import Vue       from 'vue'
import Clipboard from 'v-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.


Option 1: Using template only.

<input v-model="foo">

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

Option 2: Using javascript call.

<button @click="copy">
Copy to clipboard
methods: {
copy () {


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


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


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

© vuejsexamples.net - Privacy Policy - Cookie Policy