All right, so our first step is to figure out our stack. Are we gonna stick with something like Laravel Livewire, or do we want a JavaScript front end like React or Vue or Spell or something else that just came out next week? And honestly, there's not really a correct answer here. It just comes down to what you or your team are most comfortable with. So in my case, I am incredibly comfortable with Vue, so that's what we're gonna use. It's just the way it is, baby. So let's get started.

so that's what we're gonna use. It's just the way it is, baby. So let's get started. So of course you can browse vuejs.org, but I'm gonna install it right now from the terminal npm install vue. All right, next of course, we are working with Laravel and Vite, and as it turns out, there is a Vite plugin specifically for Vue. So take a look at this. If I visit the Laravel documentation, scroll down to where is it Vite,

So take a look at this. If I visit the Laravel documentation, scroll down to where is it Vet, yeah, asset bundling. So if we come down to view, sure enough, there is a Vite plugin for Vue. So I will copy that and once again, paste that in as well. Alright, next step you can see we can open our vite.config.js file and we can reference, uh, an import Vue as you see right here. So in fact, I can just copy all of that.

as you see right here. So in fact, I can just copy all of that and then tweak it to however needed. All right, vet config.js will be in your project route, and I'll paste it in here. All right, next, let's of course import it on the top. Of course you can do it manually or we can just grab it here. Alright, next we're gonna visit inertiajs.com. And don't worry, this isn't really another framework.

Alright, next we're gonna visit inertiajs.com. And don't worry, this isn't really another framework. It sort of is, but it's not really a framework. I think of it more like Glue. It allows us to connect a service side framework like Laravel to a JavaScript framework like React or Vue. And it allows us to continue using traditional routing and controllers and authorization and validation on the server side. But again, we, we still get all of the bells

and validation on the server side. But again, we, we still get all of the bells and whistles of building a JavaScript SPA. It's really cool. So we're gonna pull that in. If I scroll down server side, we of course need to pull in the dependencies. I'll grab this through Composer and let's keep going. Next, you can see within your blade file, your layout file. You need to of course reference your application file, which is fine, but also this Inertia, head

You need to of course reference your application file, which is fine, but also this Inertia, head and inertia directive. And this will paste in, uh, the appropriate, uh, snippets. So let's do that. Now let's come back to our project and let's see how this is configured. So we have a views directory. Do we have a layout? Components layout? Yes, we do. So yeah, I'll just paste this in. So inertia head. And yeah, just keep in mind there is gonna be a bit

So yeah, I'll just paste this in. So Inertia head. And yeah, just keep in mind there is gonna be a bit of a migration process. We have all of these Blade files and Blade components, but ultimately we're gonna be creating view components and view pages. Alright? So just keep that in mind. Alright, so come down here and yeah, this would be Inertia, all right? And we won't do the slots and even the aside.

and yeah, this would be Inertia, all right? And we won't do the slots and even the aside and navigation, all of that stuff would be migrated again to view components instead. So if I switch back and scroll down and yeah, don't feel like you have to memorize these installation steps, honestly, I don't. I just go through it. It's not like you're creating a new Inertia app every five seconds. So anyways, if I scroll down, you can see, alright, we have

inertia app every five seconds. So anyways, if I scroll down, you can see, alright, we have to set up the inertia middleware so I can run this command. All right, so now we have a new handle, inertia requests, middleware, and you can find it right here and we'll talk about that more in just a minute. All right, let's keep going. Once the middleware has been published, append it to the web middleware group and bootstrap/app.php. All right, bootstrap/app.php.

to the web middleware group and bootstrap/app.php. All right, bootstrap/app.php. And yeah, right here we can say middleware and we're going to append a new one. So I will paste that in. Let's import that. And that looks good. All right, let's keep going. Next. If I scroll down, this is how we would provide a response. And I, I just wanna warn you, this isn't a view tutorial and it's not necessarily an Inertia tutorial. I will give you tips and guidelines along the way,

and it's not necessarily an Inertia tutorial. I will give you tips and guidelines along the way, but mostly we got work to do and you're gonna follow along as I do this work. So if at any point you're like, well, you didn't explain this Jeffrey. Well, it wasn't necessarily a UJS tutorial, right? It's not necessarily an Inertia course. Uh, I will teach you things, but on your own, if you're confused,

Uh, I will teach you things, but on your own, if you're confused, research, uh, these topics. And of course we have dedicated courses on them. Okay? Okay. So now you can see, instead of returning a Blade view, we instead return an Inertia view or page component. Very similar though. Provide the name of the page component and then any data that should be sent to the props of that page component. Alright, so let's scroll back up.

that page component. Alright, so let's scroll back up. And also there's some client side installation required here. So let's install the inertiajs/inertia package. I'll paste that in right here and switch back while it's doing its thing. This is how we initialize an Inertia app. So within your main entry file, probably app.js or main.js, you can see we import createApp from vue,

So within your main uh, entry file, uh, probably app.js or main.js, you can see we import createApp from View, we import createInertiaApp from inertia. And then um, we create the app. We specify how to resolve the appropriate page components and then, uh, as part of setup, we call the traditional view code for creating a new app. Once again, don't feel like you have to memorize this, just copy and paste it and be done with it. So I'll show you, we can go into resources/js

just copy and paste it and be done with it. So I'll show you, we can go into resources/js and there's the entry point. Notice it's importing bootstrap.js, but that's just referencing Axios. I'm not too worried about that right now. So I will replace that with what you see here. Alright, so let's take a close look at this in order to resolve a page component. And remember, think of that sort of like the Inertia

to resolve a page component. And remember, think of that sort of like Inertia and the view version of a page, uh, and Blade or a view. So in this case it looks like it's gonna go into a pages directory and it's gonna look for a view file and then it's going to return that. Okay? So that's how it resolves the appropriate page component based upon the name that you pass in. So remember, if the name is post/index, then that's how it's going to figure it out.

So remember, if the name is post/index, then that's how it's going to figure it out. Okay? So within here, let's create a new folder pages. Alright, so we have quite a bit of work to do here. Here's what I'm thinking. Let's go into our routes file and let's just make sure the homepage is working, even though that's a splash page. You can see right now it's returning a view called Welcome. Instead we would return Inertia::render. Or by the way, there is just a simple inertia helper.

Instead we would return Inertia render. Or by the way, there is just a simple inertia helper function that you can use instead if you want, and we're gonna call this, uh, welcome. It's just a test for now and I'm gonna send through some data. So I'm gonna do this very slowly just to show you the basic approach. Again, just to catch up anyone who isn't familiar with this, uh, and then we're gonna go a little bit quicker.

Again, just to catch up anyone who isn't familiar with this, uh, and then we're gonna go a little bit quicker. So if you already know what's going on here, feel free to scrub ahead just by two or three minutes we'll say greeting. And I'm gonna send through Hello. And again, this will be passed as props. Alright, so now at this point what I would do is within the pages directory, I would create a new welcome file, like this pages

what I would do is within the pages directory, I would create a new welcome file, like this pages create a new file welcome.view. Now this is gonna be a single file component, so that means it can include the template scripts and even styles if you want. So I'll say welcome Page. Hello from View and Inertia. Alright, so now let's bring up our console. Let's boot up our vet surfer.

Alright, so now let's bring up our console. Let's boot up our vet surffer and yep, I have no idea if this is gonna work. Let's see if we forgot something though. That's the fun part up and it fails. Okay, no problem. I sort of expect it as much. So the issue here is that by default Inertia assumes that your root Blade component is called app. Uh, but in our case it is called layouts. So let's fix that. Now let's open our sidebar.

Uh, but in our case it is called layouts. So let's fix that. Now let's open our sidebar and yeah, rather than view components layout that Blade, let's rename this to app.blade.php. And then this is sort of like a view, it's not a blade component anymore. So I'm gonna bring it up a level into the views directory. Okay, so now we have our root app.blade.php component. Hopefully if I come back, this should work and it doesn't, but this is okay, we've changed the error.

Hopefully if I come back, this should work and it doesn't, but this is okay, we've changed the error and if you change the error by default, you're making progress. Okay, undefined variable title, yes, of course we have some lingering, um, Blade specific stuff. Alright, let's come up and for now we'll just say pixel and we get a black screen. So you know what, it's not an error, uh, but something's still missing here.

So you know what, it's not an error, uh, but something's still missing here. So let's debug together. We will go into inspect and we'll take a look here and sure enough, yeah, I can see that the directive is working. So it sounds like maybe the script isn't loading properly. Let's see. Here's our link resources/css. Correct? Here's our script resource. Ah, there it is. We forgot to make it plural.

Here's our script resource. Ah, there it is. We forgot to make it plural. Okay, let's go into our app Blade component. And there it is. I bet you saw that. So let's come back, fix it. And with any luck if I come back and refresh, there we go. We are now loading our first view page component. All right, so it takes a little bit of work. I wish that was easier, but nonetheless, we're in business. Now I wanna finish up this video by migrating some

I wish that was easier, but nonetheless, we're in business. Now I wanna finish up this video by migrating some of the existing Blade components over to view components. And here's what I mean, if I come back, alright, so here's an example of what we should do. You can see that in section two, Jeremy extracted a navigation component, which is a good idea, but now of course this needs to be migrated to a navigation view component. So yes, here's the process

to be migrated to a navigation view component. So yes, here's the process and we're probably not gonna do this for every single component, but I am gonna show you the workflow. If I scroll up within the pages directory, we could add a new folder called components. And within there, uh, as much as we can, we're just gonna follow Jeremy's naming convention. So let's call this navigation.

we're just gonna follow Jeremy's naming convention. So let's call this navigation and I'm gonna go with uppercase or Pascal case NavigationView. Okay, so now if I were to stub this out real quick, uh, let's say within a template nav section goes here. Just to show you, if I now come back to our layout file or our welcome for now, uh, at the top, let's wrap this all. And then we can say, uh, right up here,

or our welcome for now, uh, at the top, let's wrap this all. And then we can say, uh, right up here, let's import the navigation. Okay, so now you can see my editor automatically imports it. Here we're using script setup and Vue 3 and the Composition API, this should be enough. Sure enough, we can see nav section goes here. It's working perfect. Okay, so here's what I think I should do. Let's set up a dedicated layout file.

Okay, so here's what I think I should do. Let's set up a dedicated layout file. So yeah, just keep in mind, app.blade.php is gonna be like our root file. This is the single Blade file we will have, and this loads Inertia and Vue, uh, in our JavaScript. However, within Vue and within Inertia, we're gonna have a dedicated layout file. So if I scroll back up, uh,

we're gonna have a dedicated layout file. So if I scroll back up, uh, we can place it within components, that would be fine. It is a layout component, uh, but it's also quite common to have a dedicated layouts folder. So again, there's just no wrong or right here, just do what you want. So if we were to take that approach, we would have JS layouts,

So if we were to take that approach, we would have JS layouts, and within here we could have layout, uh, view. Okay, so now at this point, if I were to go side by side, let's go up to App\Blade.php. And yeah, it looks like our layout currently would consist of a wrapping div. And then we would have a navigation section, and then we would have, uh, the main content, and then we would have an aside.

and then we would have, uh, the main content, and then we would have an aside. Okay, all right. So let's go ahead and create that. Now I might be more specific in a little bit. At the moment, I'm not even quite sure what the aside is, so I will keep that somewhat generic. All right, let's create that file. Now within the components directory, let's add a new one aside.blade.php. And once again, this will be aside. Okay?

directory, let's add a new one aside view. And once again, this will be aside. Okay? So we're just stubbing it out, uh, temporarily, and then we will migrate everything over. Okay? So now if I come back to our welcome file, yeah, let's just replace this with an import, uh, of our layout like this. Now notice if I say here is the welcome page and we come back to the browser, it will fail. Okay? Whoops. We forgot to wrap this within a template.

and we come back to the browser, it will fail. Okay? Whoops. We forgot to wrap this within a template. Okay? And now sure enough, our layout is loading the navigation section, but it looks like we missed the aside. Yeah, let's fix that. Now that it exists, we can import it properly. Okay? And then finally, I'm just gonna wrap this within a div, it's kind of a good practice so that we only have a single, uh, root parent and there's our layout final to start.

it's kind of a good practice so that we only have a single, uh, root parent and there's our layout final to start. Okay? So now on the right side, I can open up the Blade version and I can migrate this over to the view version. And yeah, at least to start, let's take a look. We got a lot of stuff here. And yeah, we're just gonna go through it, uh, one piece at a time. So we have a header, all right? And we have a logo.

uh, one piece at a time. So we have a header, all right? And we have a logo. Ideally, I would like that to be extracted into its own Logo component so that I don't have to stare at it. Every time I open this file, we have the dedicated navigation section. Uh, notice for the HF it is using named routes. Instead, we're gonna use a tool called Wayfinder for that. So what I'm gonna do instead is just remove the braces.

Instead, we're gonna use a tool called Wayfinder for that. So what I'm gonna do instead is just remove the braces. So this is inferred as a string, but it's also a reminder to me, and I can even add todos here 'cause this is a big project. Um, I'm gonna add a todo that this needs to be dynamic. All right, let's keep going. So then we have some dummy links. Fine. Okay, so now we have another Blade conditional. If the route is not the, the view post page, the feed,

Fine. Okay, so now we have another Blade conditional. If the route is not the, the view post page, the feed, if it's not the feed, any loads, diviv and a button. All right? And then we have User controls, okay? And then this closes it out. So I'm not entirely sure how that's gonna work. I don't love this. Let's just comment that out temporarily and then I can return it. And that's usually how I handle these things. Okay?

temporarily and then I can return it. And that's usually how I handle these things. Okay? So let's switch back to the browser. And there we go. It works. Okay. So yeah, it, it's just a, a slow process of migrating your Blade components over to dedicated view components. And that's why, by the way, I'm not gonna make you watch all of those, uh, migrations, but we will do a handful of them together so

of those, uh, migrations, but we will do a handful of them together so that you fully understand the general process. Okay? So yeah, let's just switch back and I wanna see something. Um, we are conditionally rendering a post button. So let's just do this. Let's just say to start, we're always gonna render it. And then I'm gonna use JavaScript to, um, optionally hide it in some way.

And then I'm gonna use JavaScript to, um, optionally hide it in some way. So if I come back, okay, there's a post button right there, but presumably if you're viewing, um, a dedicated post or a profile, we don't render it. Uh, that would be my guest. Okay? So let's add a little note to do. This should only display if we are actually, I think it's not, if we are not on the post index routes. All right? And then later we can go through our to-dos.

I think it's not, if we are not on the post index routes. All right? And then later we can go through our to-dos and, and make these updates. Okay? So we're gonna take out a look at our layout. We have our navigation implemented. Now we need the aside. And I would do the same thing. I would go to the aside Blade component. I would grab all of that, and I'd come back and I'd paste this in. All right, let's take a look.

and I'd paste this in. All right, let's take a look. Now I'm looking for anything php specific. So we have a sidebar, okay? So we have another Blade component, okay? And then we have follow Idea stream. So yeah, this is, um, I would imagine this is all the stuff that Simon worked on. It's just kind of static, um, buttons and such that we could implement.

It's just kind of static, um, buttons and such that we could implement. And then we have a showMore link. Okay? So let's comment that out and take a look. And I think it's down here. We probably don't have the proper grid set. So here's what I'm thinking. If we go back to apta.blade.php, yeah, so I can see display: flex. And then on our layout we have a, a single div as the route,

so I can see display of flex. And then on our layout we have a, a single div as the route, which means it's not being applied. Okay, let's do this, let's remove that. And on the layout file itself, itself, we will try adding it. And now if I come back, there we go. So we have our, our navigation section, and then we have the aside. I believe this is the thing that goes to the right, correct?

and then we have the aside. I believe this is the thing that goes to the right, correct? So we would need something in the middle as well. Okay? So within the layout file, this is where we would have our slot. Okay? So think about it. In our welcome page we have our layout. This would be the, the default slot. So we load the layout, we have a wrapping div navigation aside, and then right in the middle is where that would go.

So we load the layout, we have a wrapping div navigation aside, and then right in the middle is where that would go. And now if I come back, here's the welcome page and yeah, presumably this is gonna have, for example, um, we'll see how they do that, but this will have perhaps flex: 1 so that it can fill the available space. Yeah, something like that. It'll have padding and we'll get to that shortly. Okay, so now I can remove this. Let's bring back the sidebar.

Okay, so now I can remove this. Let's bring back the sidebar and I think this is actually a good stopping point. So let's quickly do a recap. In this video, we went through all of the installation steps to pull in Vue.js and Inertia.js, as well as the VT plugin for Vue. We referenced that within vt.config.js, like you see right here. Alright, so this handles the bundling for single file components.

Alright, so this handles the, the bundling for, uh, single file components. Next, we updated our resources/js/app.js to pull in both Vue and Inertia. It creates the Inertia app. And then it also, as part of that, uh, workflow creates the Vue app itself. And within that, it specifies how we can load our page components. So if I go to route /web, this is

how we can load our page components. So if I go to route /web, this is where we specify our page component here. Yeah. So now because of that launch, when we render welcome, it knows. All right, I need to go into the JS pages directory and bada bing bad, boom, there is our welcome file. And also real quick, notice that we're passing through a greeting, um, data property, basically. Well, that will be accepted link.

through a greeting, um, data property, basically. Well, that will be accepted link. So I can say define props in a quick little note. We could use TypeScript here in real life, I might for this series. I feel like it's just one, two, many prerequisites. Every time you add a new prerequisite, it's another thing that the viewers expected to understand, at least partially, and it's just too much. So I'm gonna remove that, uh,

at least partially, and it's just too much. So I'm gonna remove that, uh, and we'll do just basic, uh, JavaScript and Vue. Anyways. Now I can reference the greeting, like, so switch back, give it a refresh. And sure enough, we do see Hello. Okay, we're gonna stop right there for this video. But we have clearly so, so much work to do. But I like where things are going, right? It takes a little bit of work.

But I like where things are going, right? It takes a little bit of work. Uh, we've pulled in View and Inertia, uh, we've created some page components. We've migrated Blade components to View components. Uh, we're learning about props and templates. There's a lot to do, but there's a lot more to do. So I'll see you in the next episode.