About

Copy to clipboard component for Vue 3 based on copy-to-clipboard

Simple module exposing copy function that will try to use execCommand with fallback to IE-specific clipboardData interface and finally, resort to usual prompt with proper text content and message.

If you are building using Electron, use their API.

Installation

• npm package

1npm i @xqsit94/vue3-copy-to-clipboard

• or using yarn

1yarn add @xqsit94/vue3-copy-to-clipboard

Usage

Local Component Usage

1<script setup>
2import { ref } from 'vue'
3// Import as Local component
4import { CopyToClipboard } from '@xqsit94/vue3-copy-to-clipboard'
5
6const message = ref('Copy my text')
7</script>
8
9<template>
10  <CopyToClipboard
11    :copy="message"
12    class="btn btn-primary"
13    >Copy Me!</CopyToClipboard
14  >
15</template>

Global Component Registeration

1import { createApp } from 'vue'
2// Import as Global component
3import CopyToClipboard from '@xqsit94/vue3-copy-to-clipboard'
4
5const app = createApp(App);
6
7app.use(CopyToClipboard);
8
9app.mount("#app");

Basic Usage

1<script setup>
2import { ref } from 'vue'
3
4const message = ref('Copy my text')
5</script>
6
7<template>
8  <CopyToClipboard
9    :copy="message"
10    class="btn btn-primary"
11    >Copy Me!</CopyToClipboard
12  >
13</template>

Advanced Usage

1<script setup>
2import { ref } from 'vue'
3
4const message = ref('Copy my text')
5
6const successOnCopy = () => {
7  alert('Text copied to clipboard')
8}
9const errorOnCopy = (error) => {
10  console.log(error)
11}
12</script>
13
14<template>
15  <CopyToClipboard
16    :copy="message"
17    @success="successOnCopy"
18    @error="errorOnCopy"
19    class="btn btn-primary"
20    >Copy Me!</CopyToClipboard
21  >
22</template>

Usage 2

Using Composables

Local Composable

1import { $copyToClipboard } from '@xqsit94/vue3-copy-to-clipboard'
2
3<template>
4  <button 
5    @click="$copyToClipboard('Text to copy!!!')" 
6    class="btn btn-primary"
7    >
8    Copy Me!
9  </button>
10</template>

Global Composable

1import { createApp } from 'vue'
2import CopyToClipboard from '@xqsit94/vue3-copy-to-clipboard'
3
4const app = createApp(App);
5
6app.use(CopyToClipboard);
7
8app.mount("#app");

Local Composable

1<template>
2  <button 
3    @click="$copyToClipboard('Text to copy!!!')" 
4    class="btn btn-primary"
5    >
6    Copy Me!
7  </button>
8</template>

Try Catch

1<script setup>
2import { ref } from 'vue'
3import { $copyToClipboard } from '@xqsit94/vue3-copy-to-clipboard'
4
5const message = ref('Copy my text')
6
7const copyText = () => {
8  try {
9    $copyToClipboard(message)
10    alert('Text copied to clipboard')
11  } catch (error) {
12    console.log(error)
13  }
14}
15</script>
16
17<template>
18  <button @click="copyText" class="btn btn-primary">Copy Me!</button>
19</template>
20

Contribution

PRs are always Welcome.

License

MIT