Posted on • Originally published atraymondcamden.com on
Vue Quick Shot - Copy to the Clipboard
Welcome to the third of my Vue quick shots. Be sure to check out myfirst andsecond entries. I'll be posting a quick Vue.js tip every day this week (and let's pretend I was late with yesterday's entry, ok) for you to use in your projects.
Today's entry is an example of how to add "Copy to Clipboard" functionality for a site. You see this fairly often in developer portals where keys or tokens are shared with developers for their code. A little bit of JavaScript tied to a button or some other UI is added to make it easier to copy the value. Today's tip will show one way of adding this feature.
For this tip I'll be using theClipboard API. This is a newer way of accessing the clipboard (see thisexcellentStackOverflow post for a look at other methods) that is supported in everything but Internet Explorer and Safari.
Let's begin with a simple application. I've got a form with two values:
<divid="app"v-cloak><p><labelfor="appId">App ID:</label><inputid="appId"v-model="appId"></p><p><labelfor="appToken">App Token:</label><inputid="appToken"v-model="appToken"></p></div>And here's the application behind it, which for now just sets values for the two fields.
constapp=newVue({el:'#app',data:{appId:'3493993048904',appToken:'dksklq33lkj21kjl12lkdsasd21jk'}})Alright, so how can we add a way to copy those values to the clipboard? I'm going to use a simple button that looks like so:
<buttonv-if="canCopy"@click="copy(something)">Copy</button>Thev-if portion will handle hiding or showing the button based on if the browser supports the API. Theclick handler will pass the value to be copied. I can add it to the HTML like so:
<divid="app"v-cloak><p><labelfor="appId">App ID:</label><inputid="appId"v-model="appId"><buttonv-if="canCopy"@click="copy(appId)">Copy</button></p><p><labelfor="appToken">App Token:</label><inputid="appToken"v-model="appToken"><buttonv-if="canCopy"@click="copy(appToken)">Copy</button></p></div>Now let's look at the #"http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24">
I first added a boolean value forcanCopy that will handle the toggle for showing the buttons. I then usecreated to check if the API exists. Finally I added thecopy method. Theclipboard API is an asynchronous one so I wait for it to finish and then alert the user. Let me just say that I amnot a fan of usingalert like this. The API runs so darn quick I think you could skip this part completely, but technically it's possible someone could click and try to paste at lightning speed and not get what they expect. I also think you could do the notification a bit nicer than the alert. You could add some text by the button or someplace else in the UI. Many UI frameworks support a "toast" event that will show a message that automatically dismisses. That would be a great option as well.
You can test this out yourself here:
So before I wrap this quick tip, let me point out this functionality could be done a bit nicer as a component or custom directive. If anyone wants to do this and share it in the comments below, please do!
