vue3-clipboard

Clipboard.js bindings for Vue 3.

This repository is a port of Inndy's vue-clipboard2 plugin for Vue3.

Install

npm install --save @soerenmartius/vue3-clipboard

Usage

Import the v-clipboard directive globally

src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { VueClipboard } from '@soerenmartius/vue3-clipboard'

createApp(App).use(VueClipboard).mount('#app')

Import the v-clipboard directive for a specific component

Examples

Apply the v-clipboard directive to an element

<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>

Copy value of an input, and handle events separately.

<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>

Standalone usage of the toClipboard function

<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>

Contributing

Contributions are always encouraged and welcome! For the process of accepting changes, we use Pull Requests. For feature requests please fill an issue.

License