Getting set up with Laravel and Vue using Inertia.js

hey everybody and welcome to another screencast uh today we're going to change gears a bit because um i was asking people on twitter what they would like me to do if they wanted me to keep doing um tailwind and view um screencasts or whether you want me to switch and do something else quite a lot of people have been asking me for laravel stuff and they've been asking me questions about laravel and so i did a poll and it turned out that most people wanted a laravel and view so today what we're going to do is just change gears a bit and i'm going to switch over and move away from the tailwind side of things and move to more of this laravel and view side of things we're going to cover um the back end and the front end and probably this whatever the next videos are um and yeah we're going to do some laravel that means that we're going to do some of the back end php stuff and we'll we'll keep doing view though as well we'll keep we'll stick with the view theme and we pro we will use tailwind for the kind of front end styling as well if we if we get into that but the focus is going to be more on laravel view and how we build things that work nicely together so um so to get started i would definitely recommend this new framework if you're working with laravel view um the way i would build um laravel applications that use view these days is using the inertia framework this is a reasonably new framework i think it's only been around for a couple of years um and it's it's great i've been using it for um a few years previously to lemon squeezy and um and lemon squeezy is fully built using this framework so it's solid it's a proper um production ready framework and the idea with inertia is that you can build single page apps so modern single page apps are kind of javascript only don't um have any kind of server-side rendering or anything like that you just use an api your back end is just purely an api and all of the logic and display and views and everything are all on the front end and react and viewer obviously and svel are all popular frameworks for um using this kind of tech stack where um it's very front end heavy and these are called single page applications because what happens is when you make your initial request to the server you get one response from the server and then after that everything else is just um ajax calls to the back end to the api to get any data that you need so there's just that single page that loads it first and then after that everything else is ajax so this inertia is kind of a it's a it's a genius framework in many ways because what it does is it gives you all the best bits of server side of sorry single page applications without all of the kind of downsides so um when you build um spas normally you need to have an api um but then you also need to handle things like um routing and um you know authentication validation all the kind of more complicated fiddly bits of um integrating a kind of front-end spa with a with a back-end and what inertia does is it really simplifies that by basically like um coupling them slightly tighter and so that you're you're still using the back end and larval and you i say laravel inertia can be used in any framework it can be used in different languages as well but um it's primarily the the kind of the demonstrations that they use in larval and um the way it works is that you um you use larval as if you were using it as a you know a kind of typical larval application with server-side rendering and blade views you know you would normally render your your blade view um to the client and then say they filled in a form and hit submit it would go back to the server and then return a rendered view um and so you can still use laravel in that way and and interact with it as if it's that kind of classic style server-side um application with rooting and controllers and all invalidation authentication handles all these things and it still works like that but the front end shifts away completely from the blade and the static um server side rendered rendered views and it moves um all the way to you know these front and popular front-end frameworks that people use like react and view so you can it's like the best of both worlds you still get the back end and niceties of laravel but you get the front end the modern front end uh frameworks that you can use and so you can see here there's a there's a quick demonstration of how this works you you render an inertia view and laravel on your back end just like you would render a blade view and you pass data to it and all the rest of it but instead of using a blade view you use a view component and your data is passed in as a prop and you can just use it like any other front end framework you can use it and like you would if you were building an spa so that took in a quick description of an airshot and um i would definitely recommend inertia if you're thinking of building a view application on laravel if you're using vue with larval this is definitely the way to go um and just to ex just to go a wee bit deeper and how this works this how it works page just explains a few of the things that i've just said but um it just kind of explains a bit the difference between the blade temperatures and the front end stuff but if we go to the protocol you can kind of see actually that a kind of breakdown of what happens here so um like most single page applications when you make your first request some html is returned and this might look familiar to us it's like your normal blade layout and views it contains your you know your head tags and your javascript and css but instead of returning page content all it does is it returns a single div and it has this data page attribute and this page has all the data that is required for view to um boot up and create that the component view you know like to use a component so you can see in this example here that specifies an event component it specifies the props to pass in and it's got all this data in here and that you would use um or that you need for your view to boot up an app basically and then every subsequent request um to your laravel application is then done in ajax so like like a normal spa all the subsequent requests after the first one are done using ajax and so what happens is instead of um returning html you return this json um body of data and this again same thing it specifies the component you need to use the props and all the rest of it and and what inertia does is inertia handles um you know hydrating all the view stuff with the the response from the server so that it updates all your view components and automatically so that you don't need to worry about doing ajax calls manually or any of that kind of thing you don't need to worry about how all this data syncs up you just return um your response like you would have a blade view on the back end and inertia converts it to json and then uses it in the front end to populate your view components um and so yeah that's how it works is this top level page object that contains everything that we need so component props and and that's probably about enough of a kind of description about how this all works so we're going to go ahead and basically just set this up um and we'll set up a new larval application we'll install inertia and we can see if we can get something um yeah running so uh let's just we'll just going to follow the um the server side and the client side setup guides here um as i said earlier you can actually use inertia it's kind of framework agnostic so you can actually use it with different frameworks in different languages but we're going to use the laravel package so um first things first actually we need to actually create a new larval application so i'm just going to go ahead and do that using the laravel installer and i'm just going to create a new project called inertia and give it a second to download and install there we go that's installed and then i'm just going to cd into and open it in vs code so here we have a blank a larval application and i should actually be able to run a php artisan serve and we should be able to see that it's up and running at this local url which is that's great so this is just a default layer of install i'm not going to change a single thing here um but what we're going to do is i'm going to come out of that and we're going to install the server side package for inertia and so i'm just going to run composer require for this that's fine and then it says there's this root template that we need to set up um so it says by default the laravel adapter uses the app blade view so if we go into our blade views we don't actually have one here so we'll need to create one so we'll create um an app.blade i can't spell blade.php and then i'm just going to literally copy this copy and paste this template into it um so there's a couple of things you'll see here i don't hear that um we're including our css and javascript which we haven't set up yet but we will in a minute and this just this inertia tag that's literally all it needs it to function is this inertia blade tag to output that data on the initial request um and so that's fine and then it says the next thing we need to do is install some inertia middleware now this is important because this is what handles converting the inertial responses to json or html depending on um which kind of which kind of request it's responding to so i'm just going to copy and paste this as well and publish the the middleware and if i um open this now what we can see here is that this contains a bunch of different things the root view is that app um the blade file that we've just created it needs a version and we don't really really need to worry about too much about that and it also has this shared data and or the share method where it can output data and what happens here is if you want to output data on every request like if you want if there's some like global data that you want to and output in every request you can actually share here so this can be useful for things like sharing the logged in user or i don't know the current team or something like that um but we're just going to leave that for just now but we do actually need to register this new middleware in the um kernel and i'm just going to copy and paste this literally from here and it says put it at the bottom of the web middleware group there we go um so that's fine and then yeah and then so that's it for the the server side um setup really and there's not really much else to it than that um so we need a we need a controller and we need to return a response um so i guess what we can do is i'm just going to open up the a web roots file and instead of creating a controller actually i'm just going to literally return an inertial response in here and that'll give us an idea of what we're doing we can copy this inertia class here now we don't have an event so we don't have any data to pass in the moment so we'll just take this out and we also don't have this page so before i go any further let's actually set up the client side stuff and create the view page because remember this is going to be a view component this isn't a blade template or anything that's the view component that we're going to return here so let me head back up and go to the client side installation now there's a choice here again um inertia is a framework agnostic so you can actually use it in all these frameworks but i'm going to just use view two and this may be an argument that we should be using view three and but i've to be honest i've not done loads of you through yet and i still feel very comfortable with you too and you two is going to be supported long-term anyway so i'm just going to go ahead and use youtube for the the purpose of this screencast in these videos so let's go ahead and add in these packages like it tells us to now if i open up my um package.json we should see here that what's happened is is that inertia and inertia view have been added as a dependencies and then um what we need to do is um in fact just before i go any further i'm just going to check that my in my waterville mix um we're going to use laravel mix to um compile all of these and so i'm just double checking where it does here so it's got our app.js and our css by default um so that's fine we don't need to change that um but we do need to set up our inertia app in the app.js file so let's open our app.js file and it has nothing really in at the moment other than bootstrap so if i just show you what's it what i'm doing here i'm in resources.js and app.js and in the bootstrap file there's a couple of things that laravel sets up by default one of them is is lowdash and one of them is axios which is what you would normally use um to do these ajax calls from the front end to the back end but we're not going to worry too much about that um but we do need to set up this app so i'm actually just going to copy and paste this stuff in fact i'll just get rid of the bootstrap for just next we don't need that and just put it straight in our straight in our app file um so what we're doing here just a quick rundown of what's happening here we're importing view like you would normally we have our create inertia app function that is imported from the inertia view package and instead of creating a view app like you would do normally we're using this create inertia app a function and what it's doing here is it's going to um load components from this pages directory which we've still to set up and then it's setting this up um to render then the view app that this is this is the bit you would normally have if you were creating a view application and it renders uh the app and props and um so this is how um inertia kind of captures all that data that we've sent from the back end and creates the app in javascript so let's um see what is there anything else we need to do here yeah once that wants us to add a progress indicator which is always helpful and so we'll do that as well i'm just gonna copy and paste some of these into this file just so they're set up and we're not gonna worry about code splitting just now so um so as i said um earlier that we need to set up this pages um sub directory um to kind of contain our components so i'm just going to create a new file so it's under pages and we're just going to say welcome let's just do a welcome component at first um and it's a view file [Music] so this is going to be our first component and we need to just populate it with some stuff let's just literally say hello world at the moment good old hello world um and this is our first few components so um if i go back now to the web roots file where i was going to where we rendered this component all i'm going to do is change this to um now i'm not sure if it needs the pages prefix or not but we'll double check that um so there's two things right so that says kind of set up so there's two things we need to do here one is that we need to compile our javascript code so i'm just going to run um the dev uh task and so i didn't like that what's it not liking can't resolve view oh did i not install stuff oh i'll tell you where it is i've not i've not actually installed view whoops um so we need view and let's install that as well and then try that again no it still doesn't like it what are we missing oh i'll tell you where it is um in our webpack we do need to change this because um it's it's not just js it's view file and i think actually it's just a view method that we can do for this let me see if that works oh that's what it is it's not that so you do js first and then you do dot view is what you do [Music] and it's still not working all dependencies have been installed please run mix again okay there we go right there we go so we got it running um it looks like i had to install some extra dependencies there and what were we missing if you template compiler so if we go into my package to json we should see these now yeah view view loader view template computer that's fine so um so we've compiled our our app js and um i think that might actually be us now we're just ready to serve the page so let's see if we can get this to work i'm just going to run artisan serve again and let's see if we can find out if there's an error yeah we can so can't find module pages welcome so maybe we don't need the pages prefix um in our web file maybe it's just the top level that might be my mistake we go hello world so that's it now we have a inertia set up and um let me just close some of these because we don't really need any of these now um and our it's serving our view component so remember all we did here was we set up our app.blade.php and then we could set up controllers but just for um speed and ease of use i've just rendered the inertia view in the roots file and then we have our welcome component and it's rendering hello world and just to demonstrate the kind of power of this um whole setup is um if i just uh yeah let's just do that actually copilot suggestion um if i just put a title here what happens is this will be passed to the view component as a prop and this is the real magic of inertia is this link between the front end and the back end without having to do all this yourself um so if i um create a script tag here and we'll have a prop and we'll call it what was it title and i'm just gonna um run yarn watch just in case we make any more changes and to compile our script now if i do this oh i need to put it in here so let's just actually open that title as it's um as as our prop and if i refresh this we see welcome to inertia magic so um if i go back i could change this again to um [Music] and of course you could do all sorts of stuff here you know like see you fetch a user from the database um and uh you know we do have we don't have it set up at the moment to say it's you know the user has a name and we'll call it i'll just give it my name you know so say this is kind of what you would fetch from the uh the database you know we can do what we would normally do in here you know with just normal php data processing stuff we could say um hello and user name um and of course in inertia it just gets passed as a prop so you know we can link all this stuff up really easily and in the front end you're just treating it like view so there you go that's our inertia application set up with laravel and vue and so hopefully that's helpful this has been mostly just an introduction video but that's partly because um it's good to get kind of things set up and running i guess because all of my future videos hopefully on the series are going to be based on this initial um app that we've set up using inertia and laravels so hopefully that's been helpful hopefully that's useful and we're going to get into some more interesting laravel and inertia and view things next time and we're going to start diving into all the other stuff we can do with inertia but hopefully that's been good and yeah have a good day

Channel: Gilbert Pellegrom

Views: 878

Keywords:

Id: qKK3xbKLmYk

Length: 21min 44sec (1304 seconds)

Published: Fri Sep 17 2021