vue-clipboard-plus

A simple Vuejs2 and Vuejs3 binding for clipboard.js, based on vue-clipboard2. That's awsome!✨

Thanks to Inndy/vue-clipboard2 for inspiration! ❤️❤️

About

You can use it as vue-clipboard2 like, and you can also use it with Vue3 new Composition API! I will show you the demos.

Install

npm install --save vue-clipboard-plus or use dist/cdnlink-vue-clipboard-plus.min.js with script tag in html

Usage

For Vue2, it's usage is the same as vue-clipboard2, https://github.com/Inndy/vue-clipboard2

For Vue3, it's a little bit difference

For vue-cli user:

``javascript


For Vue2

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

For Vue3

import {createApp} from 'vue'
import VueClipboard from 'vue-clipboard-plus'
import App from './App.vue'

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

`

For standalone usage:

`html







`

It doesn't work with bootstrap modals

See clipboardjs document and this pull request, container option is available like this:

`js
// For Vue2
let container = this.$refs.container
this.$copyText("Text to copy", container)

// For Vue3
const {getCurrentInstance} = Vue

// inside setup function
const {ctx:_this} = getCurrentInstance()
let container = _this.$refs.container
_this.$copyText("Text to copy", container)
`

Or you can let vue-clipboard2 set container to current element by doing this:

`js
// For Vue2
import Vue from 'vue'
import VueClipboard from 'vue-clipboard-plus'

VueClipboard.config.autoSetContainer = true // add this line
Vue.use(VueClipboard)

// For Vue3
import {createApp} from 'vue'
import VueClipboard from 'vue-clipboard-plus'
import App from './App.vue'

VueClipboard.config.autoSetContainer = true // add this line

const app = createApp(App)
app.use(VueClipboard).mount('#app')
`

Sample

`html



`

Sample 2

`html







``

For more samples, you can find them on /samples/

$3

PRs welcome, and issues as well! If you want any feature that we don't have currently,
please fire an issue for a feature request.