Note: I don't maintain this repository anymore. Instead I recommend using vueuse.
Clipboard.js bindings for Vue 3.
This repository is a port of Inndy's vue-clipboard2 plugin for Vue3.
npm install --save @soerenmartius/vue3-clipboard
src/main.ts
import { createApp } from 'vue' import App from './App.vue' import { VueClipboard } from '@soerenmartius/vue3-clipboard' createApp(App).use(VueClipboard).mount('#app')<template> <input v-model="value" /> <button v-clipboard="value">Copy</button> </template> <script lang="ts"> import { defineComponent, ref } from 'vue' export default defineComponent({ setup() { const value = ref('lorem') return { value } }, }) </script><template> <input v-model="value" /> <button v-clipboard:copy="value" v-clipboard:success="onSuccess" v-clipboard:error="onError" > Copy </button> </template> <script lang="ts"> import { defineComponent, ref } from 'vue' export default defineComponent({ setup() { const value = ref('lorem') const onSuccess = () => { console.log('success') } const onError = () => { console.log('error') } return { value, onSuccess, onError } }, }) </script><template> <input v-model="value" /> <button @click="toClipboard(value)">Copy</button> </template> <script lang="ts"> import { defineComponent, ref } from 'vue' import { toClipboard } from '@soerenmartius/vue3-clipboard' export default defineComponent({ setup() { const value = ref('lorem') return { value, toClipboard } }, }) </script>Contributions are always encouraged and welcome! For the process of accepting changes, we use Pull Requests. For feature requests please fill an issue.
