Let's talk about building really powerful, yet really simple, internal APIs in your Laravel app using a technique I like to call Headless Livewire. Now if you're already familiar with Livewire, you know how powerful it is to build brand new user interfaces that have wonderful interactivity for the user and can talk to the back end of your Laravel app. However, this technique I'm going to show you makes Livewire just as powerful if you want to integrate with existing JavaScript libraries that are already on your site. To do that, we're going to go through a site that's kind of like Laracast, a screencast website. We're just going to implement really two features here.

website. We're just going to implement really two features here. When you're watching a video on Laracasts, it will track how far into the video you are. So if you leave and come back, you go right to that spot instead of the very beginning. So we're going to do that. We're also just going to track when the User completes the video. So we have a brand new Laravel 7 app. I've just done some basic boilerplate to get us started, and we have a Video model that has a Vimeo ID, and then we have a VideoView model that shows who the User is, what Video they've watched, how many seconds they are into the Video, and have they completed.

that has a Vimeo ID, and then we have a video view model that shows who the User is, what video they've watched, how many seconds they are into the video, and have they completed it or not. Now the other thing I already have on the site is the Vimeo Player. Now this is an open source library that Vimeo provides that allows you to interact with their player and respond to events. So let's go back to our site and take a look at the code. So we just have a simple route here that gets the video, we find it, we create a videoView if one doesn't exist, and we pass it to the view here. So now if we look at our view here, we've got all the information that you've already

view if one doesn't exist, and we pass it to the view here. So now if we look at our view here, we've got all the information that you've already seen on the front end of the site, and now this is where we've implemented the Vimeo Player. So we just pass the options, including our Vimeo ID, and we create a Vimeo Player, and then we mount it to a div which we've identified right here. Once we've done that, we can interact with the player, like set the volume to zero, or we can look at this event. So whenever the video is played, we're going to respond by logging to the console that we played the video.

And let's just go back here, refresh the page. And if we take a look, we're logging how far into the video we are. So now let's go ahead and stop this. We're five seconds into the video, what we want to do is tell the back end of our site that we're five seconds in, and the next time we load this page, let's start right there. So to do that, we do need to make one more change here on the front end, is when the player starts, we're going to set the currentTime. And that's going to be the videoViewSeconds. And if that's empty, let's just put it to 0. So we'll start at the beginning, if this is null.

And if that's empty, let's just put it to zero. So we'll start at the beginning, if this is null. Okay, so all we have to do is wire this up. So if we were going to do this without Livewire, let's walk through that first. So you might install Axios. I have Axios pulled in here just for the demonstration. So if we have an Axios request, we might create an endpoint called seconds, we need to give it the video that we're using. And we also need to give it the user. Okay, and once we do that, we need to pass in the seconds.

And we also need to give it the User. Okay, and once we do that, we need to pass in the seconds. So this would be data.seconds. Okay, and that would work. Now we just need to create a controller and create an API endpoint that can listen for that. So let's go ahead and make our controller php artisan make:controller VideoSecondsViewedController. And let's go ahead and find that. And now let's make a method here.

And let's go ahead and find that. And now let's make a method here. And we're going to take in the video, the user, and we want to get a videoView. And we'll just make sure it exists. So firstOrCreate, we'll do the video_id is that the user_id is that and then once we get this, we want to update it, where the seconds match the request seconds. Okay, and if this is done, we'll return a response. Let's have a videoView here and 200. So let's just assign this there. Okay, lastly, we need to make an update to our api/routes file.

So let's just assign this there. Okay, lastly, we need to make an update to our api routes file. So let's go ahead and make a post route here to seconds, video, user, we have our controller here and it's the store method. Now with any luck, if we go back to our app, and give it a refresh, and hit play, looks like everything's working, we're getting a 200 response there, if I stop and refresh the page, you can see we've stored the seconds. Now, you can also see down here that we are four seconds into the video. So if we go all the way out to 50, give it another refresh, everything's working here. So one thing you might notice, though, about this approach is if we go back to where we've

So if we go all the way out to 50, give it another refresh, everything's working here. So one thing you might notice, though, about this approach is if we go back to where we've added this Axios post, there's no authentication here. So there's nothing stopping anyone from going to Postman hitting this endpoint and really messing with our database. So if you were going to fix this, you'd probably install something like Passport, or maybe Sanctum. Those are some options that Laravel provides to you to make these API requests authenticated. However, I find this to be a little bit verbose, I don't want to have to install those packages, I don't want to have to go create a bunch of routes in my api.php file, let me show

However, I find this to be a little bit verbose, I don't want to have to install those packages, I don't want to have to go create a bunch of routes in my api routes file, let me show you a better way to using headless Livewire. So now all we need to do is install Livewire. So we'll composer require Livewire. Okay, now that that's installed, let's go out to the Livewire website and figure out how to finish our installation. So we just need to include the assets. So I'm using Laravel 7, so I'll use this syntax. I'm going to go into the head, and we'll do livewire:styles here, and go just above

So I'm using Laravel seven, so I'll use this syntax. I'm going to go into the head, and we'll do Livewire styles here, and go just above the body and do Livewire scripts. Okay, now that Livewire is installed, we just need to make a Livewire component. So let's go back here and php artisan make:livewire, we'll call this VideoView. Alright, so now we have a class file and a Blade template for this Livewire component. Let's go ahead and open those up. And actually, before we do that, let's put the Livewire component on our page here. So we're gonna do @livewire('video-view'). And that's everything, but we do need to pass some data into the view.

So we're gonna do Livewire video view. And that's everything, but we do need to pass some data into the view. So let's do that. Now we want the video, which is just that. And we want the video view. So now let's go to our video view Livewire component. And we need a mount function that's going to take in that data. And now let's just add some public variables. Okay, now that this is done, let's get our video view blade template. And just to make sure everything's working, let's just type hello, go back to our UI,

Okay, now that this is done, let's get our video view Blade template. And just to make sure everything's working, let's just type hello, go back to our UI, and make sure everything's working. Sure enough, it is. So now we're going to go back and replace that Axios call with a headless Livewire call. So to do that, I just need to move all the JavaScript that we have here into the Livewire component, the Blade view of the Livewire component. So I'm just going to take that script out, I'm going to come back here, and I'm going to put it right there. Now one other thing I want to do if you're not familiar with this, you can look it up.

to put it right there. Now one other thing I want to do if you're not familiar with this, you can look it up in the Laravel docs, but I want to create a scripts stack and push this to that stack. So then I'll go here and right above that, I'm going to have a stack for scripts. And all that does is it takes the JavaScript from this file and pushes it over to the stack. So now that that's done, our Axios post should actually still be working. So let's just double check and make sure everything still works the way it should. And sure enough, it does, we refresh, everything is still updating. So let's go back here. And let's make this a little bit easier to see.

So let's go back here. And let's make this a little bit easier to see. So we're going to get our video view here, and then we're going to take this, and we're going to look at both of these at the same time. So now let's go ahead and comment this out. And we're going to add a new thing here, it's just one line of code, we're going to say this.call. And let's create a new function, we'll say updateSeconds, and we want to pass in that data.seconds value. Okay, now over in our component here, we just need an updateSeconds here, we're going to

data dot seconds value. Okay, now over in our component here, we just need an updateSeconds here, we're going to get the seconds that are passed in. And all we need to do here is get this and update it with the variable that was just passed in. So now if we go back to the front end of our site, we refresh, and we hit play again, we're going to see the same thing happening. And if I stop and refresh, it still works. So if we go back, you can see all of this, the API route in our api.php file, we don't have to do that, we didn't have to create a controller, everything's contained in this.

So if we go back, you can see all of this, the API route in our api.php file, we don't have to do that, we didn't have to create a controller, everything's contained in this headless Livewire component. Now because this is so easy, let's solve the other problem we were trying to solve. So let's actually copy all of this, we're going to listen for a new event, this is going to be the ended event. And we're going to delete all of this. And we're just going to make a call to markComplete. markCompleted, we don't have to pass in any data here. And we're going to go back here and create one more function.

Let's bring it to the very end. And now that it's completed, this should be a one we refresh. Sure enough, it works. So again, let's review. If you go back here, we have essentially one line here in a function. And all we have to do is get this event and fire one line, or sorry, and write one line of code here. It's so simple. However, that's not the only benefit we have in using headless Livewire. Another thing that I find really difficult when I used to build a lot of API requests,

However, that's not the only benefit we have in using headless Livewire. Another thing that I find really difficult when I used to build a lot of API requests, and was using Axios is when something goes wrong, it's really hard to debug. You can't die and dump when you're posting with Axios. You can't really dig into your PHP code in the same way that you can when you're just doing standard server rendered Laravel. However, with Livewire, you can. So let's go back to our updateSeconds and let's just throw a die and dump here and give me the seconds. Now if I go back to my page refresh, and start playing, I can actually die and dump the values.

me the seconds. Now if I go back to my page refresh, and start playing, I can actually die and dump the values to the front end. And that's so powerful. This is how I debug almost everything I'm working on. And so that's, to me, the most beneficial aspect of this is being able to die and dump and really see what's happening on the server when you're making these API requests. Now I'm really just touching the surface here. There's so much that Livewire can do interacting with JavaScript, especially Alpine. But if you look into the docs here, and on this Alpine.js page, you can see some documentation.

There's so much that Livewire can do interacting with JavaScript, especially Alpine. But if you look into the docs here, and on this Alpine JS page, you can see some documentation about communicating between Livewire and JavaScript. But basically, if we scroll down here, and you look at some of these examples, you can use the set function, you can use the call function. And all of this is available to you through this at this blade directive, when you're interacting with your scripts from your Livewire blade template. As long as you make sure that your JavaScript is on your Livewire blade template, and then you push it to your stack, then all of this is going to work just great. And lastly, if you're brand new to Livewire, let me just show something really quick is

you push it to your stack, then all of this is going to work just great. And lastly, if you're brand new to Livewire, let me just show something really quick is you don't have to do headless Livewire. Of course you can. And it's really powerful. But it's also powerful if we just do the video view seconds. This is just a really basic example of Livewire can update your UI, you don't have to rely on the console here, Livewire can do this. So maybe you want to have a button on the page that automatically shows itself as completed. After the video finishes, you can do that.

So maybe you want to have a button on the page that automatically shows itself as completed. After the video finishes, you can do that. You can do so much with Livewire, it's so powerful, both in a headless manner and in a traditional manner.