How to copy element into clipboard using Nuxt.js?

Question

I created a Nuxt webpage with Vuetify.js that generates an Email signature from a form to fill in. The render of the signature is displayed in a v-card element. I have added a v-btn to automatically copy the signature into the clipboard of the user, but I have some issues with it...

I tried to use nuxt-clipboard2 from npm to help me doing this but nothing works...

Is anyone knows how to use this package correctly or have an alternative to copy content into the clipboard with Nuxt.js?

Thanks in advance :)

EDIT

Here's my code:

<template>
    <v-container fluid>

        <div class="display-3">Email signature</div>

        <signForm></signForm>

        <v-divider></v-divider>

        <v-container>
            <v-row justify="center" align="center">
                <v-col md="12">
                    <v-row justify="center" align="center">
                        <v-card color="fafafa" class="pa-3">
                            <signTemplate ref="foo"></signTemplate>
                        </v-card>
                    </v-row>
                </v-col>
                <v-btn class="ma-2" @click="copySign" tile>
                    <v-icon left>mdi-content-copy</v-icon>Copy the signature
                </v-btn>
            </v-row>
        </v-container>

    </v-container>
</template>


<script>
import signTemplate from '~/components/SignTemplate.vue'
import signForm from '~/components/signForm.vue'

export default {
  methods: {
    async copySign() {
        try {
            await this.$copyText(foo);
        } catch (e) {
            console.error(e);
        }
    }
  },
  components: {
      signTemplate,
      signForm
  }
}
</script>

EDIT #2

Here's the signTemplate.vuecode.

<template>
    <div>
        <table cellpadding="0" cellspacing="0" style="font-variant-ligatures: normal; orphans: 2; widows: 2; border-spacing: 0px; border-collapse: collapse; color: rgb(68, 68, 68); width: 480px; font-size: 10pt; font-family: Arial, sans-serif; line-height: normal;">
            <tbody>
                <tr>
                    <td valign="top" style="font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; margin: 0px; padding: 10px 0px 12px; width: 160px; vertical-align: top;">
                        <a href="https://junior-entreprises.com/" target="_blank" style="background-color: transparent; color: rgb(51, 122, 183);">
                            <img border="0" alt="Logo" width="141" src="https://junior-entreprises.com/wp-content/uploads/2019/01/Logo-50-ans-JE-site.png" style="border: 0px; vertical-align: middle; width: 141px; height: auto;">
                        </a>
                        </td>
                        <td style="font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; margin: 0px; padding: 6px 0px; width: 320px;">
                            <table cellpadding="0" cellspacing="0" style="border-spacing: 0px; border-collapse: collapse; background-color: transparent;">
                                <tbody>
                                    <tr>
                                        <td style="font-family: Arial, sans-serif; margin: 0px; padding: 0px; font-size: 12pt; font-weight: bold; color: rgb(61, 60, 63);"> {{this.$store.getters["getSignFirstName"]}} {{this.$store.getters["getSignLastName"]}}</td>
                                    </tr>
                                    <tr>
                                        <td style="font-family: Arial, sans-serif; margin: 0px; padding: 0px 0px 11px; font-size: 10pt; color: rgb(61, 60, 63);">{{this.$store.getters["getSignJob"]}} {{this.$store.getters["getSignDiv"]}}</td>
                                    </tr>
                                    <tr>
                                        <td style="font-family: Arial, sans-serif; margin: 0px; padding: 0px; color: rgb(155, 155, 155);"><font style="font-size: 12px;">tel: 01.43.70.26.56</font></td>
                                    </tr>
                                    <tr>
                                        <td style="font-family: Arial, sans-serif; margin: 0px; padding: 0px; color: rgb(155, 155, 155);"><font style="font-size: 12px;">mobile: {{this.$store.getters["getSignPhone"]}}</font></td>
                                    </tr>
                                    <tr>
                                        <td style="font-family: Arial, sans-serif; margin: 0px; padding: 0px; color: rgb(155, 155, 155);"><font style="font-size: 12px;">email: <span style="color: rgb(23, 147, 210);"><span style="color: rgb(183, 26, 81);"><a href="mailto:" target="_blank">{{this.$store.getters["getSignEmail"]}}</a></span></span></font></td>
                                    </tr>
                                    <tr>
                                        <td style="font-family: Arial, sans-serif; margin: 0px; padding: 0px; color: rgb(155, 155, 155);"><font style="font-size: 12px;">6 Rue des immeubles Industriels</font></td>
                                    </tr>
                                    <tr>
                                        <td style="font-family: Arial, sans-serif; margin: 0px; padding: 0px; color: rgb(155, 155, 155);"><font style="font-size: 12px;">75011, Paris</font></td>
                                    </tr>
                                    <tr>
                                        <td style="margin: 0px; padding: 6px 0px 0px;">
                                            <span style="display: inline-block; height: 22px;">
                                                <a href="https://fr-fr.facebook.com/junior.entreprises/" target="_blank" style="background-color: transparent; color: rgb(51, 122, 183);"><img alt="Facebook icon" border="0" width="23" height="23" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/elegant-logo/fb.png" style="border: 0px; vertical-align: middle; height: 20px; width: 20px;"></a>
                                                <a href="https://fr.linkedin.com/company/conf-d-ration-nationale-des-junior-entreprises" target="_blank" style="background-color: transparent; color: rgb(51, 122, 183);"><img alt="LinkedIn icon" border="0" width="23" height="23" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/elegant-logo/ln.png" style="border: 0px; vertical-align: middle; height: 20px; width: 20px;"></a>
                                                <a href="https://twitter.com/cnje" target="_blank" style="background-color: transparent; color: rgb(51, 122, 183);"><img alt="Twitter icon" border="0" width="23" height="23" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/elegant-logo/tt.png" style="border: 0px; vertical-align: middle; height: 20px; width: 20px;"></a>
                                                <a href="https://www.instagram.com/cnje/" target="_blank" style="background-color: transparent; color: rgb(51, 122, 183);"><img alt="Instagram icon" border="0" width="23" height="23" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/elegant-logo/it.png" style="border: 0px; vertical-align: middle; height: 20px; width: 20px;"></a>
                                            </span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                <tr>
                    <td colspan="2" style="font-size: 13px; margin: 0px; padding: 8px 0px 0px; border-top-width: 1px; border-top-style: solid; border-top-color: rgb(183, 26, 81); width: 480px; color: rgb(155, 155, 155); text-align: center;">Avec le soutiens de nos partenaires premiums: <a href="https://group.bnpparibas/" target="_blank">BNP Paribas</a>, <a href="https://www.alten.fr/" target="_blank">Alten</a>, <a href="https://www.ey.com/fr/fr/home" target="_blank">EY</a> et <a href="https://particuliers.engie.fr/" target="_blank">Engie</a>.</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

EDIT #3

Here's a screenshot of what looks like my page right now. I would like to copy all the signature that is inside the v-card element by clinking on the button "Selectionner la signature".

Answer 1

I honestly don't think npm package is needed for this. Just go with vanilla js solution. It's so simple.

Here's the modern one. It has pretty solid browser support

methods: {
  copySign() {
    //btw writeText() returns a promise so you could utilize that somehow if you want
    navigator.clipboard.writeText(this.$refs.foo.$el.outerHTML)
  }
}

That's it. One line of code.

But if you are looking to support older browsers use this old and longer approach.

//Creating textarea element
let textarea = document.createElement("textarea")
//Settings its value to the thing you want to copy
textarea.value = this.$refs.foo.$el.outerHTML
//Appending the textarea to body
document.body.appendChild(textarea)
//Selecting its content
textarea.focus()
textarea.select()
//Copying the selected content to clipboard
document.execCommand("copy")
//Removing the textarea
document.body.removeChild(textarea)