v-clipboard3

Easily copy to clipboard in Vue 3 (composition-api) using clipboard.js 📋

Install

npm install --save v-clipboard3

Usage

For vue-cli user:

1import { createApp } from 'vue';
2// If the directive scheme is not used, no global registration is required
3import Clipboard from 'v-clipboard3';
4const app = createApp(App);
5app.use(Clipboard);

For standalone usage:

1<script src="vue.min.js"></script>
2<!-- must place this line after vue.js -->
3<script src="dist/v-clipboard3.min.js"></script>

Sample

1<div id="app"></div>
2
3<template id="t">
4  <div class="container">
5    <input type="text" v-model="message" />
6    <button type="button" v-clipboard:copy="message" v-clipboard:success="onCopy" v-clipboard:error="onError">Copy!</button>
7  </div>
8</template>
9
10<script lang="ts">
11  import { defineComponent } from 'vue';
12
13  export default defineComponent({
14    name: 'App',
15    setup() {
16      const message = '8888';
17      function onCopy(params: any) {
18        console.log(params);
19      }
20      function onError(params: any) {
21        console.log(params);
22      }
23      return { onCopy, onError, message };
24    },
25  });
26</script>

Sample 2

1<div id="app"></div>
2
3<template id="t">
4  <div class="container">
5    <input type="text" v-model="message" />
6    <button type="button" @click="handleCopy">Copy!</button>
7  </div>
8</template>
9
10<script lang="ts">
11  import { defineComponent } from 'vue';
12  import { useClipboard } from 'v-clipboard3';
13
14  export default defineComponent({
15    name: 'App',
16    setup() {
17      const message = '8888';
18      async function handleCopy() {
19        try {
20          await useClipboard(message);
21          alert('copy ok！');
22        } catch (error) {
23          console.log(error);
24          alert('copy error!');
25        }
26      },
27      return { handleCopy, message };
28    },
29  });
30</script>

Contribution

PRs welcome, and issues as well! If you want any feature that we don't have currently, please fire an issue for a feature request.

License

MIT License