¿Necesitas copiar texto al portapapeles rápidamente con Vue-CLI o NUXT?

Si necesitas cortar o copiar texto al portapapeles con Vue.JS o NUXT.JS sigue leyendo porque vas a encontrar la solución un poco más abajo.

Vamos a mostrarte como instalar y usar las derivaciones de la libreria clipboard.js para Vue y Nuxt. Clipboard.js fue desarrollada por Zeno Rocha con un objetivo sencillo: crear una libreria de javascript puro para facilitar el acceso al portapapeles sin esfuerzo. Al publicarla bajo licencia MIT facilitó la vida a los creadores de nuxt-clipboard2 y vue-clipboard2, además de la nuestra claro está.

Ejemplo para VUE-CLI:

Con Yarn:

yarn add vue-clipboard2

Con NPM:

npm i vue-clipboard2

Adiciona en tu archivo main.js de la carpeta src:

import Vue from 'vue';
import VueClipboard from 'vue-clipboard2';
import App from 'App.vue';

Vue.use(VueClipboard);
          

Ejemplo para Nuxt.JS:

El componente nuxt-clipboard2 se basa en vue-clipboard2 para facilitarle a tu aplicación web el acceso al portapapeles de un modo sencillo.

Solamente necesitas dos pasos. Primero, incluye nuxt-clipboard2 como una dependencia en tu gestor de paquetes:

Con Yarn:

yarn add nuxt-clipboard2 

Con NPM:

npm i nuxt-clipboard2 

A continuación adiciona nuxt-clipboard2 en el array modules de nuxt.config.js:

/* Módulos de Nuxt.js  */
  modules: [
  "nuxt-clipboard2"
  ],
          

Cómo usar nuxt-clipboard2 y vue-clipboard2:

Ya todo está listo. Ahora puedes copiar cadenas de caracteres al portapapeles empleando la directiva v-clipboard:copy en el elemento que lo necesites:

<template>
  <div>
    <p>¡Copia lo que desees al portapeles!</p>
    <button v-clipboard:copy="aCopiar">Copiar</button>
  </div>
</template>
       
<script>
  export default {
      data() {
        return {
          aCopiar: 'La cadena de caracteres para copiar'
        }
      }
    },
     </script>

Hay más. También cuentas con v-clipboard:success, para dejarle saber a los usuarios que la acción fue exitosa o v-clipboard:error si se produjo algún error y será necesario seleccionar manualmente el elemento deseado y hacer uso del clásico CTRL+C.

<template>
  <div>
    <p>¡Copia lo que desees al portapeles!</p>
    <button
      v-clipboard:copy="aCopiar"
      v-clipboard:success="estadoCopia(true)"
      v-clipboard:error="estadoCopia(false)"
      >
       Copiar
    </button>
    <small v-if="copiaOk === true">
      Texto listo en el portapales
    </small>
    <small v-if="copiaOk === false">
      Se produjo un error. Usa Ctrl+C
    </small>
  </div>
</template>
     
<script>
    export default {
        data() {
          return {
            copiaOk: null,
            aCopiar: 'La cadena de caracteres para copiar'
          }
        }
      },
      methods:{
        estadoCopia(status) {
          this.copiaOk = status
        }
      }

     </script>

Para más información puedes visitar el repo de nuxt-clipboard2 en github o el de vue-clipboard2 Además el origen de todo: clipboard.js, la biblioteca de Javascript de la cual se deriva vue-clipboard2.