VueJS: Copy To Clipboard

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:

Image for post
Image for post
<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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store