Real-time with Nuxt and Laravel
Playing
02. API and Client setup

Episodes

0%
Your progress
  • Total: 1h 2m
  • Played: 0m
  • Remaining: 1h 2m
Join or sign in to track your progress

Transcript

00:00
OK, let's go ahead and set up both of our projects. The API, obviously, within Laravel and the client with Nuxt. So I've already created a folder here just to house both of these projects. Let's go ahead and get started first with the Laravel project.
00:13
We're going to call this real time Nuxt Laravel. We're going to give the client a slightly different name, but we're going to change over the domain within Nuxt to hook this up so they share the same domain.
00:24
That's going to be really important when we start to look at authenticating and looking at private channels. OK, let's create this Laravel project out. We don't need a starter kit here because we're just using this as an API.
00:36
We can use any testing framework and we'll just wait for that to run through and choose our database. OK, let's go ahead and choose MySQL as our database. And let's go ahead and run the default migrations and create that out.
00:48
OK, so now that's done, let's go into that directory. So real time Nuxt Laravel. And let's go ahead and open this up in our editor. OK, now that's open.
00:57
There's not really much we need to do here. We're not even going to be spending much time in the API. Let's go ahead and create out our client project now. So to do this, we're going to use NPX Nuxty latest
01:07
and we're going to initialize a project called real time Nuxt Laravel client. Like I said, we're going to change the domain. Let's go through the steps to create this and we'll get this in our editor as well. So we can choose any package manager here.
01:18
It doesn't really matter. And let's just wait for them dependencies to install. OK, we're going to get a couple more questions here. We don't necessarily want to initialize a Git repository
01:27
and we are pretty much ready to go. So let's go ahead and open this client up in our editor as well. And then we'll merge these two projects together. So let's go ahead and merge these projects.
01:38
And now we've got two projects that we can nicely switch between. OK, so a little bit of housekeeping with the client. Let's go ahead and first of all, run npm run dev to get this booted up. So if we head over to the browser, sure enough, we have got our Nuxt app
01:52
working on localhost port 3000. We've got our API running on real time. Nuxt Laravel test. I'm using Laravel herd here, but it shouldn't really matter what you're using.
02:02
The key thing here is that we want the domain for Nuxt to match up with our API. The reason being is that when we get to authenticating on private channels, we're going to need some sort of authentication functionality within our app. And for Sanctum, Laravel Sanctum to work, we're going to need the domains to match.
02:20
And we'll cover that a little bit later. But the important thing for now is getting this domain to match up. So how do we do this? Well, within our client, we can go ahead and open up the Nuxt config file
02:31
and we can choose the dev server options. So let's go ahead and pull this in and let's go ahead and choose the host here. So we just want this to match up with what we have over here. So we'll grab the entire domain that we have here
02:43
and we'll go ahead and paste that in. That's pretty much all we need to do. So if we go over to our application now, we should be able to access this. At the domain that we've just specified on port 3000,
02:54
we're going to have to go ahead and close off npm run dev and rerun it to get this working. You can see that domain is now active. If we come back over, there we go. OK, let's finish up by doing a little bit of tidying up within this Nuxt app.
03:06
We're going to keep things pretty plain. So let's go over and work on app.view. We're going to get rid of the Nuxt root announcer and the Nuxt welcome. And let's just put some text inside of here.
03:17
And if we head over, there we go. We've got a nice plain app. What you can also do if you want to, we're not really going to be using it is you can go ahead and disable the dev tools here. Go ahead and enable it if you need to at any point.
03:28
But now we have a nice, fresh Nuxt app. We have an API that we can make requests to. Obviously, we're not going to be opening that up in the browser, but we are ready to go with both of our projects now.

Episode summary

In this episode, we set up the groundwork for our app by creating both our backend API with Laravel and our frontend client with Nuxt. We start by initializing a Laravel project inside a dedicated folder to keep our code organized, choosing MySQL as our database, and running the migrations to get things started. Even though we won't spend much time on the backend just yet, it's good to have it ready to go.

Next up, we scaffold a new Nuxt project for our client, again keeping everything tidy by using a separate folder. We walk through the Nuxt setup prompts—nothing too fancy here, just the basics to get the initial app running. After both projects are set up, we open them in our code editor and get them both running, verifying that the API and client are accessible.

A key takeaway in this setup is making sure both the Nuxt client and Laravel API share the same domain (just different ports). This is super important down the road when we deal with authentication, especially with Laravel Sanctum, which expects the domain to match. We update the Nuxt config to serve the client from the right host, restart the dev server, and check that both projects are working as expected.

Finally, we clean up the Nuxt app to keep things minimal—removing extra boilerplate and leaving just a simple starter view. Now with a clean foundation in place, we're ready to actually start building out features and connecting the two!

Episode discussion

No comments, yet. Be the first!