VueJS: Copy To Clipboard

Di.rk
Oct 21, 2020

--

Nowadays copying data to the clipboard is so easy, that you do not need a component for that, I think. It is simply as adding an initiator for example an icon:

<v-icon @click="copyDoiToClipboard(citingDoi)">
mdi-clipboard-plus-outline
</v-icon>

and providing a method for doing, that’s it.

methods: {
copyDoiToClipboard (doi) {
navigator.clipboard.writeText(doi)
},

No need to install a package or something else.

P.S.: In the example above I use VuetifyJS.

P.P.S: clipboard is only available in a secure context, that means the page should be either served from localhost or https.

See you

--

--

Di.rk
Di.rk

Written by Di.rk

Developer since the 80'th …

No responses yet