如何在 Nuxt 中正确使用 clipboard.js？

Question

I'm making my pet-project using Nuxt.js . One of the small features I'd like to implement is copying some dynamic data to clipboard. For such tasks I have always used clipboard.js , but never within Nuxt.js .

Tthe solution I wrote is working, but I'm not sure that I used it proper way.

<button class="copyToClipboardBtn" data-clipboard-target="#output">Copy</button>
...
<textarea id="output">some dynamically generated text</textarea>

import ClipboardJS from "clipboard";

export default { // component
  data() {
    return {
      clipboard: null, // data-property for storing clipboard instance
    }
  },
  mounted() {
    this.clipboard = new ClipboardJS('.copyToClipboardBtn');
  },
  destroyed() {
    if ( this.clipboard ) {
      this.clipboard.destroy();
    }
  },
}

So, my question is how to properly use such a libraries within Nuxt ?

I'm using Nuxt.js 2.14.7 and clipboard.js 2.0.6 ( https://github.com/zenorocha/clipboard.js )

Answer 1

Generally, for simplicity you would want to use a vue wrapper of this plugin and then import it as a nuxt plugin.

For example with this wrapper: https://github.com/Inndy/vue-clipboard2

plugins/vueClipboard2.js

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

nuxt.config.js

export default {
  // Some more config stuff
  plugins: [
    { src: '~/plugins/vueClipboard2.js', mode: 'client' },
  ]
}

Then you are able to use it globally, usually under this.$something()