Getting Started with Inertia, Vite & Vue 3 [Setup Guide]

hey this video is brought to you by cloudways cloudways is a fast and reliable managed hosting solution for your PHP and JavaScript apps I use them personally I've used them for years for both the laravel WordPress sites JavaScript sites for my personal sites for client sites I really have nothing but good things to say about cloudways they offer five hosting providers they put their management dashboard on top their pricing is reasonable so if you're looking for a really great manage host for your projects I highly highly recommend cloudways you can check them out using the link in the description below so this is going to be part of a larger user management system video but it actually turned into a bit of an adventure I was kind of surprised how complicated things have gotten since the move to Veep compared to the mixed days so what I want to cover in this video is setting up a Veet inertia laravel application because I never intended for this to be a video but it's a it's a lengthy process and I figured it's worth showing so the first thing I'm going to do is just spin up a new app I'm just going to call it Veet demo so it's simple and I'm going to CD into that okay I'm going to do valet link because I'm on a Mac that's what I use La secure I'm just going to ask for my password probably yeah okay I'm going to open this up in the editor and make sure it's visible so the first thing I need to do and this is just strictly because I use valet and I discovered this in the documentation here if you search valet there's a little warning that if you're using valet and it's secured meaning there's a TLS certificate generated you're going to want to include valet TLS in the veet.config.js file and this is included with every fresh application now running feet so you want to add this to the laravel plugin and you want to use your domain mind being I believe Dash demo so technically if I go in the browser now and go https beatdemo DOT test I should see after accepting this the typical layerable application now this is being loaded uh this is the welcome page that's built with blade there's nothing inertia about this layer of all application yet but this is the the first stage you're just setting up valet and now while we're in this documentation there's an interesting part here on view now I'm going to be using View and it's recommended that you include the view plugin otherwise things won't work correctly and one of the interesting bits about this is you have to import this VJs helper package and you don't actually have this installed and I don't have view installed either so let's do that first npmi View get that installed and then do npmi of the helper so we're going to have both those great so we're actually done with this file we don't need anything else just remember to set your valet TLS if you're using valet and also include the view plugin if you're using View now uh we can actually start installing inertia so if I go to server side here we'll do server side first we're going to composer install the inertia.js package and the first thing it's going to ask you to do after the installation is to create a main root template and just by convention this is what we do at work but this is also also commonly what you see used elsewhere there's going to be in your resources slash views a app.blade.php file and that's going to be treated as the entry point so you're going to want to copy this here and we're going to change it but most of it's fine go to resources views and new file app.blade.php totally misspelled that and we want to paste this in one of the problems with uh this whole process right now is that the inertia docs are out of date they're using mix what we really want to do is use add Veet and pass in an array with two elements because we've got two here so first one is going to be this second one is going to be the js1 and one thing to note is that they should have resources we should have the full path here and actually we might not need this Yep this is fine so we can actually remove these these are not needed and for now the app.blade.php file is fine we can continue on through the process here we're going to want to generate the handle inertia requests middleware that's done by running this command once we open this if you're new to inertia this is basically where you're going to pass in globally available data from PHP very useful we use it a lot so the only thing you have to note is that just publishing this middleware is not enough you need to go into your HTTP kernel so that would you have to find your web array and make this the last element it's very important that it's the last element the documentation specifically requests that and the last bit is creating responses but we'll get back to this because we still have to install the client side so I'm using view 3 and for the sake of this video I can prove that 3.2.45 so I'm going to use the view 3 inertia adapter get that installed and the next part is going to be initialize app so if you're new to this you have to initialize view but you have when you're using inertia you want to actually initialize inertia which will initialize uh view by the looks of it so uh the only problem here just like the app.blade.php file is that this is not accurate anymore one of the lucky things we have here is that if I search inertia here there's a section where they provide the exact thing you need so if we go to app.js and there's going to be some bootstrap stuff in there but we don't need it paste this in and all these links will be in the description below so don't Rush the only difference between this and what inertia recommends for a mix setup is how the pages are resolved so because there's some conflicts with Veet there has to be a helper for resolving the page component and we're we're going to be resolving everything in the Pages directory and this is actually starting at resources so your pages will be for example if you wanted a user's index you would make it resources slash JS slash Pages slash users slash index but of course I'll show you that so all you need to know is that copying this in for now this is enough and your pages should be resolved okay what else do we have in here we don't need to do this we can install a progress indicator so because requests are xhr they're all xhr based for inertia you can't really do progress bars unless you install this it's great that this is an option and you just have to copy this go to your update app.js paste the import in and I'm going to organize this a bit so that's it and you can actually use the progress bars now and we're not interested in code splitting this is more Niche stuff but we can actually go now back to the server side like I said and make our first request so I'm going to copy this and we're going to go to our web file because there's no point in me creating a controller for this video it's pretty simple like I said we're going to make a user's index it's not actually going to show users because this is more of a setup video I'm going to want to make sure inertia is imported and that's use inertia slash inertia and for here I'm just going to pass in my name just for demo purposes so David now we never created user slash index and uh this is what I was mentioning before we're going to go into JS resources slash.js and make a new Pages directory and then a new users directory and then an index Dot View and I have a very very basic View component here ready to go and now in theory we can do npmi and PMI and npm run Dev npm run Dev with Veet in the in the default configurations kind of like run watch so we got V demo we can go take a look actually first if you look here there's a little Veet page that it's going to warn you about obviously but so you got this little Veep page which is pretty cool and you can now click the demo.test and I'll enlarge this because obviously it's not very big but you can see test comes up which means view is being loaded and as well it's saying vue.js is detected on this page everything's fine but to prove that inertia data is being passed down what I can do is open up while I have the index.view open because we're passing my name as a prop I can go ahead and make this first two spaces add props do name string and we could do a name and it should show hey David when we go back because it's going to Auto reload oh never mind it didn't but it says hey David so that works data is being passed down which is great um the last thing I wanted to show which is a really important part is Ziggy so one of the issues is if you have another route right if you get route yet second link for whatever reason if this is a thing right and this returns second link and this has a name of second you definitely want to use names on your route to go around your app you don't want to be just using hard-coded links that's a disaster in the making right so there's no easy way to do this without something called Ziggy built by the wonderful people at Titan so we got Ziggy by Titan it's a very cool little helper let's just go to the installation here it's a composer require so it's a composer package let me open up a new tab get that installed and uh add the at routes blade directive to your main layout before your application's JavaScript and the route helper function will now be available globally okay so let's do that so we our main entry point as an inertia application is app.blade.php our JavaScript is uh our JavaScript is rendered right here I don't know if rendered is the right term but that's where it is so we're going to put routes there and now you'd think this would work but not that's not the case because we're using inertia we have to pass it in through the app.js we're lucky though because if we are using if we're in this in this file here we can pass in something called a mix-in which is like a globally available function and we can call this we can add methods so make these methods globally available this and just make this route so the route function that they're saying is globally available for use is actually being passed in right here because it's available here and because we're making it a mix-in it'll be globally available within our templates so if we go back to index and we make an a tag add an href and use the route mixin Helper and use the second remember second is the name of the route here right use second close off the a tag and just say go to second page let's go back to our site go to our second page click it and it shows second link and so links now work even to named routes this is pretty much all you need to build a really great application from from basically start to end now you might want to add some other little things that you're going to want to style maybe Tailwind maybe you want to set up the server side I think they're server side rendering yeah server side rendering there's a whole bunch of stuff you can you can use with with inertia and I think that this brings us to the end of the tutorial so I hope you enjoyed it please consider subscribing I make these videos for fun and if you have any topics that you would like covered please let me know in the comment section below thank you for watching and I'll see you in the next one

Channel: David Grzyb

Views: 7,063

Keywords:

Id: Yp4SifzmRu4

Length: 13min 9sec (789 seconds)

Published: Thu Dec 15 2022