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:

https://github.com/Inndy/vue-clipboard2/blob/be0e6df47b46b8cb834991a3188a2b604a06b4fa/README.md?plain=1#L3

to match the description in package.json:

https://github.com/Inndy/vue-clipboard2/blob/be0e6df47b46b8cb834991a3188a2b604a06b4fa/package.json#L4

[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

https://github.com/Inndy/vue-clipboard2/blob/be0e6df47b46b8cb834991a3188a2b604a06b4fa/vue-clipboard.js#L35-L78