Tutorial

Copying Text with vue-clipboard2

Published on April 30, 2017
author

Joshua Bemenderfer

Copying Text with vue-clipboard2

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Sometimes it’s really convenient to have a nice little “copy” button next to a tidbit of information in your web app. No big deal, just a little button right? Well, it turns out that’s a bit more difficult than one might expect. Copying text requires either creating or accessing an input element, setting the selection, and executing the copy command. To make things worse, it’s only supported in recent browsers. The most common way around this is to use Clipboard.js, a small library that does this for you. But its API lends itself more to Vanilla JS than Vue.js. Thankfully, vue-clipboard2 exists to wrap Clipboard.js and make it nice and simple to use.

This will be a nice and short article since vue-clipboard2 has an incredibly simple, no-nonsense API.

Installation

Assuming you already have a Vue project set up, install vue-clipboard2 as with any other Yarn or NPM package.

# Yarn
$ yarn add vue-clipboard2
# NPM
$ npm install vue-clipboard2 --save

Now, as always, enable the plugin in your main app file.

src/main.js
import Vue from 'vue';
import VueClipboard from 'vue-clipboard2'
import App from 'App.vue';

Vue.use(VueClipboard);

new Vue({
  el: '#app',
  render: h => h(App)
});

Usage

Now, it’s just a matter of adding a v-clipboard:copy directive to your button.

<template>
  <div>
    <p>Here, copy this thing: {{thingToCopy}}</p>
    <button v-clipboard:copy="thingToCopy"></button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      thingToCopy: `A string that's not all that long or important. Sorry to disappoint.`
    }
  }
}
</script>

Of course, you want to be able to show feedback to your users when the copy succeeds or fails (especially since older browsers don’t work with this method,) so you should probably show a message when the copy succeeds or fails. This can be done with the v-clipboard:success and v-clipboard:error directives.

<template>
  <div>
    <p>Here, copy this thing: {{thingToCopy}}</p>
    <button
      v-clipboard:copy="thingToCopy"
      v-clipboard:success="handleCopyStatus(true)"
      v-clipboard:error="handleCopyStatus(false)"
    >
      Copy the thing!
    </button>
    <p v-if="copySucceeded === true">Copied!</p>
    <p v-if="copySucceeded === false">Press CTRL+C to copy.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      copySucceeded: null
      thingToCopy: `A string that's not all that long or important. Sorry to disappoint.`
    }
  },

  methods: {
    handleCopyStatus(status) {
      this.copySucceeded = status
    }
  }
}
</script>

And there you have it! Really simple copy-pasting for your Vue.js apps when you just can’t be bothered to implement it yourself. Enjoy!

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Joshua Bemenderfer

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel