How to create copy to clipboard in Vuetify VujeJs application

This is a quick tutorial on how we can add copy to clipboard functionality in the VueJs application.

In this example, we are going to create the invitation code where users can copy that code in the clipboard so that they can share it simply by copy-paste.

Let's create a simple component called CopyToClipBoard.vue and add a template

<template>
    <div>
        <v-card height="460" class="mt-8">
            <v-card-title class="justify-center mb-2 pb-0">
                <span class="text-center red--text">Your invite code</span>
            </v-card-title>
            <v-card-text class="text-center mb-0 pb-0">
                <v-chip color="grey" text-color="white" class="font-weight-bold">
                    <span class="inv-text">A0xU76E</span>
                    <v-divider
                            class="mx-4"
                            vertical
                            light
                    ></v-divider>
                    <v-tooltip top>
                        <template v-slot:activator="{ on, attrs }">
                  <span @click="copyCode" @mouseout="reset" style="cursor: pointer;" v-bind="attrs"
                        v-on="on">Copy</span>
                        </template>
                        <span>{{copyText}}</span>
                    </v-tooltip>
                </v-chip>
            </v-card-text>
        </v-card>
    </div>
</template>

Here, we are using vuetify UI framework, you can use your own HTML CSS. We are adding two events called @click for copy text to clipboard and @mouseout event for resetting the default value. 

Let's add the data:

created() {
    this.copyText = this.text
  },
data () {
    return {
      invitationCode:"A0xU76EJK",
      text: "Copy to invite",
      copyText: ''
    }
  },

Create the methods used in template:

methods : {
    async copyCode() {
      await navigator.clipboard.writeText(this.invitationCode);
      this.copyText = "Copied"
    },
    reset() {
      this.copyText = this.text
    }
  }
}

We are using vuetify tooltip to give the copy information. 

When the user clicks on the button it will call copyCode function and will copy in clipboard. In order to do so, we are using navigator.clipboard API which allows user to grant the website or app permission to access the clipboard. 

After that, we have to copy the invitationCode value so we pass this value as a parameter.

The sample demo looks like below:

The overall implementation looks as:

<template>
    <div>
        <v-card height="460" class="mt-8">
            <v-card-title class="justify-center mb-2 pb-0">
                <span class="text-center red--text">Your invite code</span>
            </v-card-title>
            <v-card-text class="text-center mb-0 pb-0">
                <v-chip color="grey" text-color="white" class="font-weight-bold">
                    <span class="inv-text">A0xU76E</span>
                    <v-divider
                            class="mx-4"
                            vertical
                            light
                    ></v-divider>
                    <v-tooltip top>
                        <template v-slot:activator="{ on, attrs }">
                  <span @click="copyCode" @mouseout="reset" style="cursor: pointer;" v-bind="attrs"
                        v-on="on">Copy</span>
                        </template>
                        <span>{{copyText}}</span>
                    </v-tooltip>
                </v-chip>
            </v-card-text>
        </v-card>
    </div>
</template>

<script>
    export default {
        name: "CopyToClipBoard",
        data () {
            return {
                invitationCode:"A0xU76EJK",
                text: "Copy to invite",
                copyText: ''
            }
        },
        created() {
            this.copyText = this.text
        },
        methods : {
            async copyCode() {
                await navigator.clipboard.writeText(this.invitationCode);
                this.copyText = "Copied"
            },
            reset() {
                this.copyText = this.text
            }
        }
    }
</script>

<style scoped>
    .inv-text {
        min-width: 150px;
        font-size: 20px;
    }
</style>

Read More