Usare la clipboard in Vue.js

In questo articolo vediamo come usare la clipboard in Vue.js versione 3.

Prima di tutto installiamo la libreria vue3-clipboard:

npm install --save vue3-clipboard

Poi nel nostro main.js aggiungiamo queste righe:

import VueClipboard from 'vue3-clipboard';

app.use(VueClipboard, {
    autoSetContainer: true,
    appendToBody: true,
});

Infine nel nostro componente:

  <Button icon="pi pi-copy" class="p-button-rounded p-button-info mr-2"
                        @click="copiaNote('TESTO DA COPIARE')"/>

import {copyText} from 'vue3-clipboard';

  methods: {
    copiaNote(note) {
      copyText(note, undefined, (error) => {
        if (error) {
          alert(error);
        }
      })
    }
  }
  

Vi ho messo tutto insieme.

In ordine abbiamo:

• il bottone per copiare un testo
• un import
• un metodo che esegue la copia

Enjoy!