Alpine.js Copy to Clipboard


May 18th, 2022 03:48 AM

Hello guys,

I am in the early stages of development world and I am building a new site with Tailwind CSS and hopefully Alpine.jsScreen Shot 2022-05-18 at 13.41.14.png

A looked it up in the documents and couldn't find a way to make it work. Can you show me a live example of it?

I want to visitors copy to selected text to their clipboard when they @click the "Copy to Clipboard" button.


May 18th, 2022 03:59 AM

Alpine doesn't come with "copy to clipboard" built-in, you'll have to add that functionality yourself or by using an Alpine component like ryangjchandler/alpine-clipboard.


May 18th, 2022 04:02 AM

Thanks for the reply. I've tries the repo but didn't work for me. Maybe its because I tried it with the CDN script instead of npm.

I'll try again.


May 18th, 2022 04:24 AM

Did you include the clipboard component before you included Alpine? It needs to be loaded in before Alpine itself.


May 18th, 2022 04:40 AM

I did not do it like that as far as I remember. I will try that first and update here if it works.



Jun 13th, 2022 01:11 PM

It's live now :)