https://github.com/cinob/vue-reactive-clipboard
A minisize vue2/3 reactive clipboard
https://github.com/cinob/vue-reactive-clipboard
clipboard copy vue vue2 vue3
Last synced: about 1 month ago
JSON representation
A minisize vue2/3 reactive clipboard
- Host: GitHub
- URL: https://github.com/cinob/vue-reactive-clipboard
- Owner: cinob
- Created: 2021-08-02T10:15:05.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-02T14:41:17.000Z (almost 5 years ago)
- Last Synced: 2025-10-26T21:54:06.804Z (8 months ago)
- Topics: clipboard, copy, vue, vue2, vue3
- Language: TypeScript
- Homepage:
- Size: 27.3 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-reactive-clipboard
A minisize vue2/3 reactive clipboard
## Install
Install with [yarn](https://yarnpkg.com):
```bash
$ yarn add vue-reactive-clipboard
```
Install with [npm](https://npmjs.com):
```bash
$ npm i vue-reactive-clipboard --save
```
## Usage
### `Vue3`
```html
{{ content }}
import { ref, watchEffect } from 'vue'
import { useClipboard } from 'vue-reactive-clipboard'
const { text, copy } = useClipboard()
const content = ref('click me to copy!')
watchEffect(() => {
if (text.value) {
console.log('copy successed: ' + text.value)
}
})
```
### `Vue2`
Install [`@vue/composition-api`](https://github.com/vuejs/composition-api) as a dependency.
```html
{{ content }}
import { ref, watchEffect, defineComponent } from '@vue/composition-api'
import { useClipboard } from 'vue-reactive-clipboard'
export default defineComponent({
setup () {
const { text, copy } = useClipboard()
const content = ref('click me to copy!')
watchEffect(() => {
if (text.value) {
console.log('copy successed: ' + text.value)
}
})
return {
content,
copy
}
}
})
```