So now that we've installed and configured Inertia, we can now create our first page. So we'll start by going to my Laravel routes file, and here you can see it's returning that old Blade view that we deleted. Now if we were to reproduce this, I could swap out the Vue helper function with an Inertia helper function, and then by convention, we often capitalize these names. But it's effectively the same thing as when you return a Blade view. The only difference is we're now basically returning a client-side view. Now again, by default, these pages will be stored in the pages directory. So I'm going to create that now. Welcome.

So I'm going to create that now. Welcome. And just as a little refresher, don't forget in your main entry point, here's where we instructed Inertia where to find our pages. Look in the pages directory for that file. So notice if I switch back, yeah, you didn't have to say pages/welcome. That base directory is assumed. Okay, so within here, let's start off really simple. Hello world. All right, so let's compile this down, and then view it in the browser.

And this is your top level component. This is where information about the initial page will be passed through. So notice we want to load the welcome view, and here's the props that will be shared with it. And sure enough, if we scroll down, here is your welcome view. So it's very much like a Blade view, but on the client, which means you get the full benefit of JavaScript and Vue interactivity and reactivity. You get it for free, but this all still feels very familiar. All right, let's now pass some data. I will return to my routes file.

All right, let's now pass some data. I will return to my routes file. Now actually a quick note here. Yes, we can use the inertia helper function, and that's fine if you prefer. Or you can import inertia. And then you can instead say inertia render. And this is going to achieve the exact same thing. So in the same way that you could say if you're rendering a Blade view, you could say view make or view, the same is true. You could say inertia render or inertia.

make or view, the same is true. You could say inertia render or inertia. Now the docs usually demonstrate this approach. So I'm going to stick with that just to be consistent. Now notice the API here, so to speak, is very familiar. And on purpose, it's familiar with how you would load a Blade view. You provide the name of the view or the page in this case. And then as the second argument, you would pass an array of data that will be extracted and passed as props to your page component. So as an example, if I were to pass a typical name here, you know, the thing we all do when

and passed as props to your page component. So as an example, if I were to pass a typical name here, you know, the thing we all do when we're learning something new, I would then go to my Welcome page component, and I will now accept it as a prop. So our props are we expect a name that should be a string. And I'll reformat. And that's all we have to do here. This is Inertia doing its thing. So why don't we say hello, name. Now don't forget, if I come back and refresh, it'll still say hello world because we haven't

So why don't we say hello name. Now don't forget, if I come back and refresh, it'll still say hello world because we haven't recompiled our code. So instead of running mix, usually run mix watch, and this will keep an eye on your files for changes and then recompile. So now if I come back and give it a refresh, sure enough, it works. All right. So here's the rule. Whenever you want to pass data from a server side controller to your view page, you need to declare it as an accepted prop.

Whenever you want to pass data from a server side controller to your view page, you need to declare it as an accepted prop. And then you pass that through when you return and render your Inertia response. OK. So now why don't we tweak this? Instead of welcome, maybe we'll have a home page. So I will change that name and then update the corresponding view page. So that should have recompiled. So if I give it a refresh, we still see the same thing. Next, why don't we pass through an array of data?

So if I give it a refresh, we still see the same thing. Next, why don't we pass through an array of data? And again, as an example, we'll just pass through some of the technologies that we'll be using in this series. So frameworks, and we're going to be using, of course, Laravel and Vue and Inertia. All right. So back to our page component, and we're now going to accept a list of frameworks. All right. Let's give it a shot. Come back to Firefox.

are passed down here. And by the way, if you're curious about errors, how is that being passed through, we'll talk about that a little more a bit later. So let's finish up by iterating over that array. In this series, we will use the following frameworks. And then we'll do some basic view iteration. This has nothing to do with Inertia. V for framework, in or of frameworks, then set V text to framework. All right. And that should do it.

This is just a simple explanation with no code.