To get started, let's imagine we have a URL for a referral program that we'll allow a user to copy to the clipboard with the click of a button. We're using an input here, but in reality, the source of the text you're copying doesn't matter.
Clicking the button should now copy the value defined within the Alpine component to the clipboard. Notice I'm using the value twice here, once in the input value and again within the Alpine component. I prefer to do this rather than target the element and grab its value. There are tons of ways to use this plugin, so I'd recommend checking out the docs once we're done.
Sprinkling in some more functionality
Right now, the user has no idea anything has been successfully copied to the clipboard. Let's change that by switching up the button value when the user clicks to copy.
After 3 seconds, the button label will change back to the original text. We also use clearTimeout to reset the timeout so we don't keep too many timeouts running if the user clicks more than once. This avoids any flashing of text.
The solution here is the one I use the most to copy to the clipboard with Alpine.js, but the plugin we're using provides other methods. If you need something specific or need to tweak anything, check out the documentation.