Flexible Flash Notifications with Inertia
This episode is for members only

Sign up to access "Flexible Flash Notifications with Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
02. Quick Inertia setup

Episodes

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

Transcript

00:00
If you're new to Inertia or you need a little refresher, we're going to take this part just to set up an Inertia project in Laravel. The first thing I've done is actually create a Laravel project, and the only thing that I've done here is changed around my database connection settings. So if you wanted to start from scratch and follow along, you can follow this video.
00:19
Otherwise, jump on to the next episode. OK, so we've got our app running in the browser just here. We're going to go over to the starter kit section on the Laravel documentation, and we're going to go and install Laravel Breeze. This functionality will work with anything that uses Inertia. So even if you're not using Laravel Breeze, it doesn't matter too much,
00:38
but we're going to use Breeze because it's pretty easy to get started with. So I've gone ahead and pulled in Laravel Breeze with Composer, and now we're going to head down to the section where we're working with Breeze and Vue, and we're going to go ahead and use phpArtisan Breeze install, and we're going to pass in the Vue flag just here. That's going to go
00:56
ahead and pull in and use Inertia for us. You can, of course, use React here, even if you're working with Inertia, but we'll stick with Vue. So the next thing to do is migrate once npm install and npm run have finished. So we'll wait for that to finish first of all, and that's done. So we're going to go ahead and migrate our database, and we already have an npm install and npm run dev
01:18
done, but I always just like to run these just in case. So npm run dev, and we'll just wait for that to complete, and our app should be running, and you can see that just here all compiled. We've now got a login and a register option. So the first thing that we're going to do is go ahead and register an account here. It doesn't really matter that we are logged in, but now we're on
01:40
our dashboard. So a quick look around here if you are new to Inertia. If we head over to Roots and Web, you can see that we've got a homepage here which is using Inertia to render out a Vue component called Welcome. If we just head over to that, that's in Resources, JS and Pages. We define the props here that get passed down to this Vue component, and we have all of the template just inside of
02:04
here as well. So you can take a look around here. We're interested though in just creating an additional root and then sticking this form over on the dashboard, which is what we're going to be covering anyway. So we're going to create a root out in here, but effectively we now have an Inertia powered app set up and ready to go.

Episode summary

In this episode, we're making sure everyone is set up and ready to rock with Inertia in Laravel. First up, we start with a fresh Laravel project—if you want to follow along from scratch, that's perfect. Just tweak your database config, spin up the app, and you’re good to go.

We then jump into installing Laravel Breeze using Composer, since it’s a quick way to get started with authentication and it works nicely with Inertia. You’re not stuck with Vue (React is fine too!) but this time we stick with Vue for the demo. After installing Breeze with the Vue flag, we run migrations, install npm dependencies, and fire up the dev server.

With that done, you’ll see a working login/register page. We quickly create an account, log in, and land on our dashboard. Then we take a whirlwind tour of the project structure—pointing out how routes work with Inertia, where your Vue components live, and how data flows from Laravel to the front-end.

By the end of this setup, you have an Inertia-powered Laravel app ready for building out new features. Next up, we'll be adding new routes and custom forms!

Episode discussion

No comments, yet. Be the first!