Forem

Cover image for Vue Quick Shot - Copy to the Clipboard
Raymond Camden
Raymond Camden

Posted on • Originally published at raymondcamden.com on

5 2

Vue Quick Shot - Copy to the Clipboard

Welcome to the third of my Vue quick shots. Be sure to check out my first and second 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 the Clipboard API. This is a newer way of accessing the clipboard (see this excellent StackOverflow 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:

<div id="app" v-cloak>
  <p>
  <label for="appId">App ID: </label>
  <input id="appId" v-model="appId">
  </p>

  <p>
  <label for="appToken">App Token: </label>
  <input id="appToken" v-model="appToken">
  </p>  
</div>

Enter fullscreen mode Exit fullscreen mode

And here's the application behind it, which for now just sets values for the two fields.

const app = new Vue({
  el:'#app',
  data: {
    appId:'3493993048904',
    appToken:'dksklq33lkj21kjl12lkdsasd21jk'
  }
})

Enter fullscreen mode Exit fullscreen mode

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:

<button v-if="canCopy" @click="copy(something)">Copy</button>

Enter fullscreen mode Exit fullscreen mode

The v-if portion will handle hiding or showing the button based on if the browser supports the API. The click handler will pass the value to be copied. I can add it to the HTML like so:

<div id="app" v-cloak>
  <p>
  <label for="appId">App ID: </label>
  <input id="appId" v-model="appId">
  <button v-if="canCopy" @click="copy(appId)">Copy</button>
  </p>

  <p>
  <label for="appToken">App Token: </label>
  <input id="appToken" v-model="appToken">
  <button v-if="canCopy" @click="copy(appToken)">Copy</button>
  </p>  
</div>

Enter fullscreen mode Exit fullscreen mode

Now let's look at the JavaScript:

Vue.config.productionTip = false;
Vue.config.devtools = false;

const app = new Vue({
  el:'#app',
  data: {
    appId:'3493993048904',
    appToken:'dksklq33lkj21kjl12lkdsasd21jk',
    canCopy:false
  },
  created() {
    this.canCopy = !!navigator.clipboard;
  },
  methods: {
    async copy(s) {
      await navigator.clipboard.writeText(s);
      alert('Copied!');
    }
  }
})

Enter fullscreen mode Exit fullscreen mode

I first added a boolean value for canCopy that will handle the toggle for showing the buttons. I then use created to check if the API exists. Finally I added the copy method. The clipboard API is an asynchronous one so I wait for it to finish and then alert the user. Let me just say that I am not a fan of using alert 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!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

đź‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay