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

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.
7 episodes 28 mins

Overview

Flash notifications exist in almost every application. With Inertia, flashing notifications requires a bit more thought, and we're going to take this further and end up with a global notification plugin that just... works.

By the end of the course, you'll have the ability to flash any type of notification, anywhere in your application, without repeating any code.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.