Build Modern Laravel Apps Using Inertia.js - Ep 3, Pages

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 view 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 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 slash 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 it works this is a good feeling and in fact if i take a look at the source you'll notice it was inserted into our layout file as we'd expect but let's have a deeper look i'd recommend installing a tool called view devtools you can see i've already done it but if you want to do it all you need to do is search for vue.js dev tools and there should be extensions for chrome and firefox so if you use chrome i'm actually in firefox in this case then you would add it here okay so then come back to your browser sometimes you need to exit out and bring it back but then when you open up the inspector you should have a new tab and this is pretty sharp i think you're going to like this 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 view 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 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 now the docs usually demonstrate this approach so i'm going to stick with that just to be consistent now notice the 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 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 comma 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 minx you 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 alright so here's the rule whenever you want to pass data from a 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 okay 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 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 give it a refresh and now if i open up view dev tools in my home component sure enough i've received that array of data i mean how cool is that it's so seamless and again if i go back to the top level inertia component you can find all of the props that 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 v4 framework in or of frameworks then set vtext to framework all right and that should do it so it compiles down behind the scenes we give it a refresh and we've now successfully rendered a client-side page and passed data to it from the server side that's pretty neat in the next episode we'll keep going

Channel: Laracasts

Views: 1,650

Keywords: web development, php, programming, laravel, laracasts, jeffrey way, coding

Id: inBAncC__YI

Length: 5min 49sec (349 seconds)

Published: Thu Oct 07 2021