Copy texts to clipboard using Vue clipboard2

vue-clipboard2

If you have tried to use a button in a web app, to copy instantly a piece of information, you may know that it is not as easy as it seems. Also, you may find difficult to implement it and executing a copy command, and it is only supported in the recent browsers.

The vue-clipboard2 plugin comes into play acts as a wrapper to Clipboard.js offering aquick and simple solution.

Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load.

Examle

Installation

When your Vue project is all set up, use the following command to install vue-clipboard2 to your node-modules directory:

yard add vue-clipboard2

Import the plugin to your main app file to make it available globally

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

To use in your templates, utilize the v-clipboard:copy directive

<template id="t">
  <div class="container">
   <div class="field">
      <label class="label">
                Copy to Clipboard!
            </label>
      <p class="control">
        <input v-model="message" type="text">
      </p>
    </div>
    <button type="button"
    v-clipboard:copy="message"
    v-clipboard:success="onCopy"
    v-clipboard:error="onError">Copy!</button>
  </div>
</template>

<script>
new Vue({
  el: '#app',
  template: '#t',
  data: function () {
    return {
      message: 'Try & Copy What I`m saying'
    }
  },
  methods: {
    onCopy: function (e) {
      alert('You just copied: ' + e.text)
    },
    onError: function (e) {
      alert('Failed to copy texts')
    }
  }
})
</script>

The directive can be used in combination like v-clipboard:success where you can execute a function on success like throwing an alert to inform the user the text is copied.

In the above code Bulma is used for styling

You can find the plugin on GitHub along with everything you need to start, and save yourself the trouble of creating this from scratch.