@soerenmartius/vue3-clipboard

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 or use dist/vue-clipboard.min.js directly without webpack.

Usage

Copy the value of an input.

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

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