CODEWITHSUNDEEP
javascriptvue.jsnuxt.jsclipboard.js
Roman Meyer
Roman Meyer

Reputation: 2872

How to proper use clipboard.js within Nuxt?

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)

Upvotes: 0

Views: 656

Answers (1)

Thibaut Maurice
Thibaut Maurice

Reputation: 617

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()

Upvotes: 2

Related Questions