Vue 3 Support

[brendan1212]

Hi! I just want to throw in my vote for Vue 3 support, since its now in RC5, which means we're getting very close and the API shouldn't have any more breaking changes. Thanks!

[jd-solanki]

+1

[gterras]

I would like to know if the author plans to support Vue3 too.

[soerenmartius]

I urgently needed this for one of our projects, so I came up with a port for Vue 3: https://github.com/soerenmartius/vue3-clipboard

[jd-solanki]

Hi @soerenmartius It's really great. Can we have function like $copyText??

[soerenmartius]

Hi @soerenmartius It's really great. Can we have function like $copyText??

Thanks! Yeah sure. That's just an unstable pre v0.1.0 release. I am working on converting everything to Typescript. Will release a stable version later this weekend that will also allow for standalone usage without loading the whole thing globally. I will come back to you later this weekend.

[soerenmartius]

Hi @soerenmartius It's really great. Can we have function like $copyText??

Just added it :)

[JamieCurnow]

I also wanted a Vue 3 version of this for use just with the composition API in the setup() function. No Vue plugin, no adding to this, no Vue directive, just a simple method. So I made https://www.npmjs.com/package/vue-clipboard3. Feel free to use! Issues/PRs/contributions welcome 📋

[snowdream]

Can you support Vue 3?
Thank you.

[zenflow]

@Inndy I saw PR #121 was merged. Can this issue be closed?

[zenflow]

@Inndy I tried it out and this package does indeed seem to be compatible with Vue 3

I suggest closing this issue, and to remove confusion, also change the description in the README:

vue-clipboard2/README.md

Line 3 in be0e6df

A simple vuejs 2 binding for clipboard.js

to match the description in package.json:

vue-clipboard2/package.json

Line 4 in be0e6df

"description": "A Vuejs2 & Vuejs3 binding for clipboard.js",

[jd-solanki]

Use this https://vueuse.org/core/useClipboard/

[renatodeleao]

@zenflow the plugin works, the directive doesn't. Some directive lifecycle hooks name changed so there's a mapping required based on current vue version. @Inndy if you want can make a PR.

Example from @vueuse

https://v3-migration.vuejs.org/breaking-changes/custom-directives.html#_3-x-syntax

bind → beforeMount
inserted → mounted
update # removed use updated
componentUpdated → updated
unbind → unmounted

vue-clipboard2/vue-clipboard.js

Lines 35 to 78 in be0e6df

	bind: function (el, binding, vnode) {
	if (binding.arg === 'success') {
	el._vClipboard_success = binding.value
	} else if (binding.arg === 'error') {
	el._vClipboard_error = binding.value
	} else {
	var clipboard = new Clipboard(el, {
	text: function () { return binding.value },
	action: function () { return binding.arg === 'cut' ? 'cut' : 'copy' },
	container: VueClipboardConfig.autoSetContainer ? el : undefined
	})
	clipboard.on('success', function (e) {
	var callback = el._vClipboard_success
	callback && callback(e)
	})
	clipboard.on('error', function (e) {
	var callback = el._vClipboard_error
	callback && callback(e)
	})
	el._vClipboard = clipboard
	}
	},
	update: function (el, binding) {
	if (binding.arg === 'success') {
	el._vClipboard_success = binding.value
	} else if (binding.arg === 'error') {
	el._vClipboard_error = binding.value
	} else {
	el._vClipboard.text = function () { return binding.value }
	el._vClipboard.action = function () { return binding.arg === 'cut' ? 'cut' : 'copy' }
	}
	},
	unbind: function (el, binding) {
	// FIXME: investigate why $element._vClipboard was missing
	if (!el._vClipboard) return
	if (binding.arg === 'success') {
	delete el._vClipboard_success
	} else if (binding.arg === 'error') {
	delete el._vClipboard_error
	} else {
	el._vClipboard.destroy()
	delete el._vClipboard
	}
	}