Package Exports
- vue-clipboard3
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-clipboard3) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
vue-clipboard3
Easily copy to clipboard in Vue 3 (composition-api) using clipboard.js 📋
Install
yarn add vue-clipboard3
or
npm install --save vue-clipboard3
About
For use with Vue 3 and the Composition API. I decided to keep in line with the Vue 3 spirit and not make a directive out of this (if you want a vue directive, please make a pull request). I think it makes more sense and provides more clarity to just use this as a method in the setup() function.
Keep it simple.
Usage
Simple
<template lang="html">
<button @click="copy">Copy!</button>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api'
import useClipboard from '~/composables/useClipboard'
export default defineComponent({
setup() {
const { toClipboard } = useClipboard()
const copy = async () => {
try {
await toClipboard('Any text you like')
console.log('Copied to clipboard')
} catch (e) {
console.error(e)
}
}
return { copy }
}
})
</script>With ref
<template lang="html">
<div>
<input type="text" v-model="text">
<button @click="copy">Copy!</button>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api'
import useClipboard from '~/composables/useClipboard'
export default defineComponent({
setup() {
const { toClipboard } = useClipboard()
const text = ref('')
const copy = async () => {
try {
await toClipboard(text.value)
console.log('Copied to clipboard')
} catch (e) {
console.error(e)
}
}
return { copy, text }
}
})
</script>API
useClipboard(options: Options)interface Options {
/** Fixes IE by appending element to body. Defaults to true. */
appendToBody: boolean
}returns an object with a single key: toClipboard
toClipboard(text: string, container?: HTMLElement)requires that you pass in at least one argument that is a string. This is the text to be copied to the clipboard. The second optional argument is a html element that will be used as the container internally when using clipboard.js.
Contribution
PRs and issues welcome!
git clone https://github.com/JamieCurnow/vue-clipboard3.git
cd vue-clipboard3
yarn install
yarn watch