Sign up to access "Build a URL Shortener with Volt and Folio" right now.

we need to do here because when we register plugins with alpine we need to disable live wires alpine integration and then basically run our own so let's go ahead and just start to design this out first of all so over in our area just here we have this div what we could do here is wrap this in another div and then we're going to have our button just down here so let's create

our button that looks similar to our normal button that's going to be a little bit too big at the moment and let's just pull this down so it's a little bit easier and we'll go ahead and set the type to button again because we don't want to resubmit that form okay so at the moment this is going to look a little bit weird let's just go ahead and grab a url and yeah there we go just

hovers down the bottom so with this what we can do is set the outer container to relative and then we can absolutely position this button inside of the input so to do this we're going to go ahead and set this to absolute we'll set the inset here to y2 and then we'll set the right to 2 so what that will do is pull it just in there now we need to make this button a little bit smaller as well

so let's go ahead and figure out what we've got here so we've got a padding on the x of 10 that should be able to be reduced a little bit we've got a margin on the top of 4 which we don't need we've got a height of 11 we could bump that down to 10 and that should be just about it let's have a look yeah there we go so there's our button now with this we're going to call this copy like so

because that makes sense so when we click on this we want this content copied to the clipboard now before we go any further this plugin does require that you're working with https because the functionality behind it within javascript requires that you have https enabled so i have https enabled go ahead and do that now if you're following along and you need this to work

okay so we're going to go ahead and pull this plugin in so let's just go ahead and install this with npm and then we'll take a look at how we figure this out because we're going to have an issue otherwise so basically to register this plugin we already have alpine imported we import the clipboard plugin we go ahead and register the plugin and that's it but the only problem is

over in app.js we don't have alpine pulled in if we did do that it's going to conflict with livewire's alpine version so the first thing that we want to do is head over to our app layout and disable livewire scripts so we're going to go ahead and use the livewire script config directive now this is going to break everything so if we head over here and we try and do anything you can see it's

just submitting the form nothing is actually working here which is fair enough because we have disabled the implementation what we can now do though is over in app.js we can pull alpine and livewire in and manually register this so then we can attach plugins to alpine now we can actually head over to the docs to see an example of this and in fact the clipboard plugin is shown

as an example here we've already gone ahead and disabled these so we can just go ahead and pull all this in to be honest because we've already got the clipboard plugin in there it just so happens that the example uses the plugin that we are actually using so as you can see here we're importing livewire and alpine from the javascript within livewire then we're going ahead and we are

starting livewire so that's just what normally happens behind the scenes but in between that we're going ahead and pulling in the clipboard plugin registering it directly on alpine so now livewire's alpine implementation uses the plugins that we've registered so now that we've done that we just come away from this and give this a refresh we shouldn't see any errors in the console

everything should work as normal but now we have access to that clipboard plugin which is great so now over in here this copy button we need to make this an alpine component so let's use x data on here and within our data we want to store the url so i'm going to go ahead and create out a url property in here and that is just going to contain the value that we have here

we don't want to be really reading from this element it makes sense just to locally store this within this alpine component now so now what we're going to do is when this is clicked we can use this new plugin to go ahead and copy this to the clipboard so to access this plugin we just use the clipboard method and then we choose the property that we have stored within this alpine

component to copy to the clipboard so that's pretty much it we are going to make some tweaks to this but let's see if this works so i'm going to go ahead and say google.com get short url that's g7 so let's click copy and let's open this up and yeah sure enough that has copied the correct url and obviously we know this redirects us over okay so we can make some improvements to this because

when i do click copy here it doesn't really look like anything is happening so what we can do is introducing a copied property inside of this component we can go ahead and set this to true and then we can go ahead and set a timeout to set this back to false we'll do that in just a second but we can change around what value we see in here based on whether it's been copied or not

so to do this we're going to go ahead and set some x text in here and if we have copied this so if it has if it has been clicked and this is true we'll go ahead and say copied otherwise we'll just say copy now we can leave this in here it's fine but that will go ahead and change that around so let's try this out let's go ahead and enter a url again click copy and there we go it changes

over to copy so set a property to true and then change the text of the button depending on whether it's been copied but we don't really want this hanging around so inside of here what we can do is go ahead and set in a timeout within javascript and we'll set that to disappear after a couple of seconds and then we can just set copied back to false so let's look at the whole flow go ahead

and enter a url in here click this copy eventually after two seconds that's going to go back to copy but we know it's been copied and we now have the url which of course redirects us over nice so our copy to clipboard functionality is done that changes that over nicely so we can actually see that this has been copied