Intro to Inertia.js with Laravel Breeze Example

hello guys today i will try to make an introduction to inertia.js with an example of laravel breeze framework version with inertia and inertia is one of the modern ways how to build single page applications but in a different way than we have been doing before so before we can go actually to the page called who is it for it describes it really well so if you for example if you are a back-end developer historically but you want to change your application to single page application spa which means that whenever you click some link the full page wouldn't refresh and only the data would be refreshed without full circle to the server and back so before inertia what would you do you need to build the api then you need to figure out the auth for that api client side state management routing as well setting up a new git repo for the api then hosting and stuff like that so inertia is here to solve all of that with a different approach to single page applications which means that you would stick mostly with your laravel routes and laravel logic and load those laravel routes from inertia of ujs components inertia is not only for laravel and it's not only for vue.js it works also with other technologies like react or rails on the back end but in this video we will take a look at vue.js version with laravel with laravel breeze as an example and laravel breeze is one of starter kits officially by larval if you go to larval breeze you can install that by composer require but maybe some of you don't know that recently taylor released inertia version of the breeze there was a tweet and laravel news article in february of 2021 again i will zoom in taylor released the inertia option and the syntax by the way changed since that tweet there was inertia but since then the starter kit became view and also by the way there's react but we won't talk about react in this video so if you want to install laravel breeze with inertia you should choose install view and i've done exactly that and my larval breeze local installation looks like this so default laravel home page and what is the main purpose of inertia here so when you click register see it loads immediately so it doesn't even go to the server to load all the page so let's click around immediate immediate login forgot your password so it's blazing fast why because if we open the development console network we click login only one login request with an image then home page then register already registered forgot your password something like that but no assets are reloaded from the server which means the exact single page application so the page is already loaded the whole page this area but inside of that page these internal parts are reloaded only these internal parts are reloaded but not the full page with full html now let's dive into the code how it all works to start using inertia you need to do two installations server side and client side on the server side there is a package inertia laravel and also you need to prepare root template with blade and this is exactly done in larval breeze so in composer jason we have inertial larval here on top of flowerville breeze and also there's app blade let me find it resources views app blade this one so this is the main html which would be loaded only once and then the inertia part will be reloaded so only this internal part a few more inertia related stuff so routes we will talk about that in a minute and then this is outside of beginner tutorial so let's skip that browser sync that's totally optional and then we also need to set up the client side so i will show an example of view 3 which is exactly the base of laravel breeze view version so we need to install inertia and inertia view three which is exactly in our package json if we take a look here there's inertia inertia view three and there's also optional library for inertia progress which is down below basically so if you want to view the progress bar on top whenever the page is loaded so this is for progress bar and that's also optional but the main parts are these inertia and inertia view three and then in your main app.js file in view main app.js file you would have something like this so let's open that app.js in the breeze it's almost copy pasted from the official documentation so i won't even really discuss too much of it the basics is that pages will contain all the view components which will be actually the pages so we won't have blade pages of laravel we'll have view components instead which are all in the pages so for example you have resources js pages auth and then will be login register and all of those dashboard and welcome and we will take a look at them in a minute and then the main magic happens here in the routes web this is laravel code instead of doing return view you do inertia render it could be in laravel controller for example home controller which would return inertia render instead of view so inertia render accepts the component welcome which is in resources.js pages welcome blade here and passes the parameters like it would pass the parameters to the view to the blade view but actually it passes the parameter to view js view let's take a look at welcome view welcome dot view it's a typical vue.js template vue.js component so template and script at the bottom on top of a regular view js so at the bottom we have script and we have those properties can login can register laravel version and php version which are all on the home page here so those variables for laravel version or php version and the links that can log in or register and they're used as a typical vue.js variable so if we search for can login in the same page we have v if can login so it's a typical vue.js component but the difference is that with the help of inertia we can load that vue.js component with passing the parameters from laravel to vue.js directly previously it was possible with some kind of hacky way or doing api calls from the view components you would load view component and in here in welcome view you would have at the bottom some api call to get the laravel version php version or others so inertia makes that process much faster so that's one advantage of inertia and then the whole jumping between the links that i've shown you a few minutes ago happens by replacing regular html links with href to inertialink with route and that route comes from laravel routes so in the vue components you can call routes from laravel with help of another library called titan ziggy which we install in the laravel part in the composer json it allows you to have route helper inside of your javascript components so it's inside of our composer json and here in titan code ziggy it comes with laravel breeze inertia version by default installed so we don't need to install that manually in this case so we can have route login which comes from the routes web or in fact it comes even deeper so in default laravel breeze we have routes auth as a separate required file and in routes auth all we have is typical laravel controllers with laravel routing so there's nothing about inertia in this file so every route has a name and we point to that name like name login in vue.js component so that's another kind of a magic happening you can point to laravel routes from vue.js component and inside of that authenticated session controller in breeze instead of having return view we have the same thing return inertia render and we render the component of resources.js pages auth login view which is vue.js component so in this case in this project we don't even have blade files we work with view templates instead but we pass the parameters to those components directly from larval like they would be blade views so that's what inertia allows us to do another important part of inertia is passing global parameters like this one so we have v if and if the auth user exists then we show the dashboard link else we show login and register right so where this thing comes from in the installation of inertia in the backend part after installing dependencies in all of that you have middleware and laravel breeze generates it for us by default so there is a middleware handle inertia requests and it is in app http middleware handle inertia requests and there is a share method where we can share any global variables that you want define the props that are shared by default so in this case we define auth array and user inside of it which becomes auth dot user in here so props is a global prop so auth.user comes from that middleware and you can add more global variables in here another good thing about inertia is that you don't need to do anything on the javascript site for authentication and permissions you can use laravel routes middlewares wherever you need to perform something on the dashboard for example you protect the dashboard by passing the middleware here auth verified so that's another thing that you can reuse from laravel to work with vue.js components so that dashboard is also vue.js component which is in resources js pages dashboard view and it is protected by laravel middleware auth and verified and the final thing in this introduction video let's take a look at the forms how login form is submitted in laravel breeze taylor created quite a lot of components so breeze label is a component in resources.js component so there's a set of view components so we don't really care about that for now it's just a thing that exists by defaulting breeze and you can check them out but what we do care about is breeze button which is a submit button for the form the form is without any routes without any actions but submit prevent submit and submit is a method in the script part of the vue.js component so in import part you do have those components and layouts also layouts there are resources js layouts so you can check them out as well authenticated and guest but what we care about is this so we have form of this inertia form with a dollar sign and that form contains email password and remember false and that method submit that we saw earlier does post request to what to this route login and whatever happens with that login it resets the password so for example if some validation comes like login invalid the password would be cleared up and that route login if we go back to routes web or in fact routes off php post to login comes from authenticated session controller store and this doesn't have anything to do with inertia at all it works as a typical laravel controller method with store with validation from laravel everything is liable and it redirects where it should redirect but inside of that inertia page it still is a single page application so this is how forms are submitted in inertia you may find a bit different syntax for example in the official documentation they use a thing called reactive here and submit inertia post instead of dollar inertia so you may find different syntax versions here and also keep in mind that view 3 and view 2 may be different so this is view to example so if you try to work with inertia please double check the source of the code the view versions inertia versions and when the article was written i'm not sure that even this syntax would work like in a year from now if you watch this video in the future for example so that's it as an introduction video to inertia.js what do you think about that it's kind of like alternative or the opposite to livewire which is also popular in laravel community so both frameworks or it's not even a framework both technologies appeared roughly at the same time and that's why laravel jetstream for example has live wire version and inertia version in itself because taylor said he liked them both and wasn't able to choose between one or another so what do you think have you used inertia and did you like it or if you haven't would you start or would you try it out you can also of course get a bit deeper into larval breeze code so install that with view and there are a lot of things that i haven't touched in this introduction video so you can dive deeper and that's it for this video if you want more tips on laravel or related technologies like inertia subscribe to the channel and tell your friends to subscribe because i'm shooting videos daily now and see you guys in other videos

Channel: Laravel Daily

Views: 10,863

Keywords:

Id: jadX8xaR6tY

Length: 13min 5sec (785 seconds)

Published: Tue Jul 20 2021

Reddit Comments

[u/posts_lindsay_lohan]

It sounds like with Inertia, you get to use Vue for your templating, but in reality you are making a multipage app because you no longer need to create a separate API layer for the frontend to consume.

To me, the weakness of this is that now you don't have that separate API, so if a client wants a mobile app later on down the road, then you can't do it because - even though it's using Vue - the frontend is too tightly coupled with the Laravel backend routing system.

If this isn't correct, please let me know because I would love to use Inertia if it can simplify the project without tightly coupling it.

[u/__thegodfather]

How is this compared with Live wire ?