Vue Inertia + Laravel Course. 2/17: Table of Data - From Vue to Inertia

hello guys we continue our new tradition started yesterday i'm releasing the full course about inertia vue and laravel and today we have the second lesson we install inertia and transform the table of data from vue.js with api to vue.js with inertia and see the benefits if you don't want to wait for new lessons every day on youtube you can still purchase the full course which is here at laravel daily the teachable.com and then you will also get access to the repository of the code now let's dive into today's lesson so we start with a practical example of inertia and as an initial status i have a project with vue.js without inertia which is just a table of data which uses composables for composition api and looks like this so in the blade file of laravel we have post index component in that component we have composables and get posts comes from that composable with axios get to get the posts and our goal with inertia to basically avoid all of that avoid api call and just accept those posts as a parameter from the back end so instead of having posts in routes api we will get to routes web which is currently empty with just the dashboard and built with the help of inertia routes get post index get that data from the eloquent in laravel and pass that but not to the blade instead to inertia component step by step so we install inertia and it comes with two parts server side setup with laravel and then client-side with vue.js so we composer require the inertia package paste then what else root template so we need to put this as root template and by default it should be app blade view so in our app blade view we do have that layout already in my demo project which is based on tailwind but let's actually remove all the design and paste exactly what is in the documentation of inertia we'll probably lose the design but i will show you how the inertia works and then later in this course we'll talk about layouts and designs so paste it here next in terms of installation middleware php artisan inertia middleware inertia middleware created successfully now in that middleware we need to put that middleware in the kernel file app.http kernel.php in the web list we need to paste that inertia request okay and then creating responses is inertia render so instead of returning view in the controllers we will do inertia render so let's create a controller php artisan make controller a web controller not api post controller to show all posts we could do that technically in routes web in inline but i want to show the real-life example which in most cases you will create the controllers instead of inline here and route get posts will be attached to that new post controller and we have two post controllers one from my api the older version and one is web index and inside of that post controller we will have public function index get the posts of post all or paginate whatever you want for now let's do post all and then return inertia render or a shorter way is inertia helper which will be the component the component will be posts index and it's common to have uppercase the first letter for both folders and the component itself and data what we have to pass compact posts it's the same almost the same identical syntax like you would return the view just return the inertia so we're done with the controller we don't need the request here good and now we take care of the second part of the installation which is client-side setup we need to install inertia.js and inertia view 3 in this case i'm using view 3 version there is also version 4 view 2 react and svelt but for now i'm installing inertia view 3 with npm it is successful and then laravel mix says that build successful then we need to initialize app so we need to change the source of resources js app.js to this so before that in my demo app for vue.js this was the syntax this comes from default laravel and this was my vue.js application instead of that i paste it from the documentation of inertia comment this out and let's see what we have here so we call the create inertia app which comes from that inertia package and all our pages all our components will be by default in pages and then name of the page which means that when you call inertia render or inertia here then it would come from pages then post then index so we need to move actually our resources js components post index view actually rename components folder to pages rename pages like this and then in our post index.view instead of all of that all we need to do is accept those posts that we load from the controller so instead of that setup instead of that everything export default props would define the properties posts object we save built successful and final thing that i've noticed that we didn't do is we missed the correct layout so the layout that we just copied and paste app blade is in the layouts subfolder resources views layouts app and by default inertia is looking for resources views app blade but it's configurable really easily in the middleware that we had just generated previously the first root view property is what defines the root component and in our case it's layouts dot app and now let's load our browser if we load the main url it doesn't work anymore because of course we replaced old vue.js behavior with our new inertia component but if we load the posts which is defined in routes web look what happens we do have the table of course we don't have any design and we lost some things that were implemented on the vue.js for transformation of the data but we do have the post passed from the controller and it works in inertia so let's reiterate what happens now in the routes web we pass the controller in the controller will load the data from the eloquent then we'll load that vue.js component which accepts that as parameters so we don't need to call api routes api is not used at all the api post controller is not used at all it's all handled by inertia which in the vue.js component just accepts those as properties which we can use in the table in the v4 so this is the main benefit and the main goal of inertia so you would stick with your logic to laravel and get the data from laravel and would not need to create separate api separate composition api in vue.js or something more complex so this is the basic example let's move on and see what inertia offers more

Channel: Laravel Daily

Views: 39,614

Keywords:

Id: kt-Ywm2SkWc

Length: 7min 21sec (441 seconds)

Published: Tue Mar 29 2022