From Laravel Blade to Vue.js + API [Live-coding Example]

hello guys today will be a lesson for those of you who want to start using UJS with laravel but we're hesitating and maybe were afraid to start in this lesson I will show you a practical example switching this project you see on the screen from typical arabel blade and back-end to view GS version which will look a little bit different so if we refresh the page you see the loading for fraction of a second so this is a few GS version with the API so I will do live coding of switching typical Arabelle to view and api and i hope you will learn from that and this is probably the most simple example i could come up with and I'm a big believer that people should learn from practical examples without even knowing all the theory behind view GS and JavaScript practical example is the best way to start so let's start so what do we have here we have a home page of a catalog and the left-hand side you see the list of categories fake names and done list of products also with fake names fake prices and descriptions in the database it's very simple turn categories and ten products with relationship to category ID in the code there is only one route in routes web PHP file get to the home controller home controller index gets all the categories and all the products without any pagination or filters I just thought to go simple with this example and we returned a new home which just returns there for each of the products and categories like this so for each products and then for each categories on the left and the fronton team is taken from a bootstrap theme from and start bootstrap shop homepage it's really really simple based on bootstrap for now let's transform that to UJS where do we start first we will start with the back end with the API layer that would return products and categories to the front-end and then we will take care of UJS so let's go to our routes API PHP and create two routes route get categories and it will be API controller category controller index a few things here to mention it's a good practice to put your API controllers in their own subfolder and name space and also controller is named in singular form category controller and not categories controller but it's just a good practice it's not required and we duplicate that role in two products and it will be a product controller as well for now they don't exist so let's generate them so open our terminal PHP artisan make controller API slash category controller an API folder doesn't exist yet and it will be created with the controller and also let's do product controller product controller okay let's open our tree of files and we see controller API category controller an important thing if you specify subfolder here it will also generate the namespace for you which is correct so don't forget them namespace for subfolders and we go index and we return all the categories category all that's it for now and for product controller would do really similar thing index return product oh let's try that in a browser so we go project test slash API slash categories by default all the routes in routes API PHP are prefixed with API and this is our result it's not really readable right so I suggest to use some API client like postman where we can go and copy paste the URL click sound and this is a much more readable format so all the fields of categories but what I like to do is to hide some fields which are unnecessary or maybe even harmful to show so web clients don't really need to know when the category was created is it new or not so that's how I created an update that and for that we will create API resource PHP autism make resource category resource and similar we will have product resource and it will generate a few files in a page TTP resources category resource and resource file is a set of rules what to return from the API so instead of default parent to array we will return exactly what we saw return array and for the category we need ID of this ID this is actually the category object and then name this name and delete that line and it looks pretty pointless right so we're listing the same ID and name and attaching that to variable but the point here is to not list created at an updated add we save the resource and in controller instead of doing category all we will do category resource collection and then category all as a parameter let's try it out and see what happens if we refresh in the postman send the same thing two things happen first as we wanted created at an updated add are gone but also another layer of data and this is a good practice enabled by default in laravel and I advise you to leave it like that because in addition to data there might be more information like error messages pagination next page and stuff like that and let's do the same for the products we will actually copy-paste the same thing to product resource and we need description additionally this description and also price and price is an interesting thing API resources are for set of rules not only for hiding some fields but also to transform them before the resources came to arable in laravel 5.5 people were using something like transformers and some takács is to transform the data so eloquent results may bring more data but the actual return from the API may be different or smaller and for the price we need to do exactly that price is saved in the database as integer like this and you can Google articles about precision why it needs to be like that so Google precision double float money and a lot of articles why you should not store the data bass floats for the money but you need to transform them while returning so we need on the price we need to do number format this price divided by 100 with two decimals and in the controller we do product resource collection product all let's try the products actually / products we sent and we'll have an error this is the beauty of life coating products controller of course I made mistake which I have mentioned myself so instead of category singular I did products in plural okay product controller it should be let's refresh send now we have what we need product ID name description and price and if we return how it should look visually that's exactly what we need so name price and description and for the category we need only name so we took care of the API of the back end we are returning products and categories in API and parts so API URLs are called endpoints now let's go to vgs route let's go to our blade file and let's transform it to not load the HTML immediately instead of all the container with the categories list and products list we will have 1 div element which will contain all the actions of UJS so this is how UJS works you need to have an element with some kind of ite and we will call it app it's pretty typical and inside of that everything will be happening all the magic of UGS and you will specify that the app is the core element of your pjs we will get to that in a second and inside of that app you can do HTML you can do whatever and also you can load the components UJS components and we will have one component which will contain all the logic of here so let's call that component front page front page and it looks like an HTML tag right but in reality it will be a beauteous component which will contain all of that so let's copy and paste all of that div container in fact cut and paste so we don't need that at all and that you content is irrelevant it's from some older project so this means everything else will be static and this part will be dynamic and let's create a component in resources J s folder let's create a subfolder components and let's create a component dot view file new file and it's the best practice to name them in camelcase so from uppercase letter so front view and we paste all of that content for now in blade language and every view component has two parts the template so the HTML part and the JavaScript part so this should be wrapped in template so all of that is a template I will reformat it with comments alt L in a phpstorm so this is our template for UJS and now we need to tell laravel or tell UJ s that this component should be used and if app should be the main element and this is done in file resources J s ab j s which looks like this in default level we need to require UJ s then tell the ID app should be main and then load the front component so three things and I will just copy and paste the code that I've prepared this is how it looks in terms of syntax so we require UJ s would tell that our component front page which is the same as here is attached to components front view and we also load the new view instance with ID app which is the same as ID app here so we delete all of that to make it all work we need to actually install UJ s or in fact require it and it's pretty similar to laravel requirements like composer install but for front-end there is a separate file called package.json not composer JSON but package JSON and in here I will also copy and paste of UJ s with a certain version which is 2.5 in this case but any version should be ok for this simple example first as an experiment let's delete all the dynamic data and how we'll show you that actually works and how it is compiled so let's delete the for each part of the categories let's delete the product parts and that's it so we should see shop catalog and an empty page we save the view and final thing I wanted to show you here so in that home blade as you can see there is no data so we don't need to return anything from controller here and in fact we don't even need the controller that so in our web PHP would change get from controller to route view home and that's it so there is no controller it will work this way it will load the blade with HTML and then there will be JavaScript calling the API and loading the data so as you can see in home blade there is no actually blade syntax except for this one maybe but that could be replaced with something like this ok let's get back to practice to install all of that and to compile all of that differently from the backend you need to run some commands and there are two commands to run npm install and npm run death that's the default structure it could be different for your environment there are more commands and parameters but by default let's stick with those two for the simple example so we go to our project and you npm install and this will take quite a lot of time and it will install quite a lot of things so be prepared to have like 100 megabytes on your drive and probably good internet connection as well and that's it it is done in 21 seconds it's ok so for a really small project it's quick but if you load more stuff it may take minutes and now we do npm run death building the modules and as you can see laravel mix message built successful and the result of all of that is a file in public so public jas app.js which is a compiled file it's really ugly it's really long javascript file so you don't need to know what's inside of that but it is actually the result that should be loaded inside of the blade so in our case we'll have script source and then laravel mix command mix J s J s and that's it we'll load it the JavaScript and now let's reload our page so this is how it looked before as you remember we removed all the products and categories a new tab project test and it is empty but it didn't throw any errors and it is successful the proof of that is text shop catalog which comes from view component from here so it's not in the blade but it is loaded by UGS so this is the proof that is actually working and now let's load the data from the API so as I said you component has two parts template and JavaScript and let's create the second part we go script and then there's some weird syntax which I don't will want to explain its export default and inside of that you will post all the magic as I call that and there are three parts we need to take care of that private properties of that component so that component that view you can imagine that as a PHP class as object-oriented class which will have its own parameters its own its own properties which will be loaded from the API so what properties we need to have products and categories right and we go data function call that function return this and go categories by default will be an array and products by default will be an array empty array so we define the properties similar to PHP object oriented class next we need to go and define all the actions that should happen when that component is loaded and this is called mounted and inside of that mounted we will list all the actions and actions will be defined by private methods so see the similarities view component is pretty similar to PHP class it has properties and also it has methods methods and you just list the methods and will have load categories for example function which will of the category and then method load products function which will load the products and in the mounted we will just call both of them so this load categories as you can see it's already autocomplete it in phpstorm and also this load products you can take a pause and take a look at different syntax so sometimes there are brackets sometimes there are semicolons so you can read the new GS documentation for that but I will just move on with the example so this function load categories should load the categories from the API then assign that to the variables so this categories should be assigned and then catch errors if there's anything wrong happening with the API to load the API we have a package called Axios which is by default in laravel here and for those of you who are familiar with jquery it should be dollar get or dollar Ajax in this case it's Axios get the URL and we'll do them something and also catch something so this is the syntax we get the URL something is happening to assign the variables and if something goes wrong there's a catch the URL is slash API slash categories the one that we created previously then we need to assign the response data to the private variable of this categories and this is the syntax response this categories equals response data and data again it looks pretty complicated but response data is the actual data returned from the API and since inside of that as you remember from API resource we have data also we need to add that data again and in cache you can do whatever you want with an error but console.log error message that's it let's reformat that remove unnecessary start HP store helped me to reformat that and now what is happening here actually we load the API from the server and then we get the response and when signed that to this categories and view J s magic will assign that to private variable and we can show that variable here in the template part and we will do exactly that okay so I will just close the sidebar for now and we'll just paste the actual code so instead of for each categories we will have categories as private variable and this is the syntax of UGS off for each loop v4 in bladed would be for each categories as category in VG s is like this and then category becomes the variable of that loop and we need category name here let's launch and see if it works and if I didn't miss anything and again we cannot just refresh the browser we need to recompile the stuff so npm install NPM run does ok npm install is finished and PM run dev compiled successfully and now let's refresh the page refresh and what do we see on left hand side list of categories so let's recap what is happening here behind the scenes but the component is loaded by UGS that HTML is loaded and then mounted is fired which loads the categories the result of that category's API response is assigned to a private variable private property which is defined here and I will remind you the API response for the categories is this one so IDM name inside of the data that's why that data is inside of this one and then UGS takes care of the assigning the variables to be shown in the HTML in the template part as a practice let's repeat that with the products what do we need to do basically copy/paste actually so exci has yet but it will be products so products it will be assigned to this products and then inside of here we will do v4 and to save your time I will just paste the code it is similar v4 to the element but then it's more complicated on the inside some div class but still in the inside its product dot something so anything return from the API name price and description remember we were told that from the API that should be it NPM install NPM rondelle began successfully and refresh the page and we see our products magic right but let's add actual magic that the loading screen the loading give that would circle around until the data is actually loaded for that we will add another property called loading and by default it will be true which means that while loading is true no data should be shown and we will add that here in the main container class which is a UGS variable loading if it is loading true so this is the syntax and class loading will come from CSS loading CSS and I've prepared that CSS behind the scenes so we will add class loading to the whole container if loading is true and we will play around without loading being true or false and what is false then the data is actually shown so by default we add that to loading true and if we get a successful response from the products or the categories we will set that to false in fact we need to set that to false only when we have the successful result of the last API call so it is here so this loading equals false which will perform the action that this class will be not present which means it will open the container to be visible I have recompiled the results and let's refresh the page refresh and as you can see the loading screen is happening let's do that again so class loading is true by default but when it gets the results from the products it becomes false which means removing that class and showing the actual container with all the data so that's a crash course on view j/s with laravel I and this could be your start you're beginning to actually start using view Jes and the API the code will be available on github if you want to get more videos about laravel on this channel you can do two things to support this channel use our laravel admin panel generator quick admin panel calm the link is on the screen or enroll in one of my courses about level at teachable platform and see you guys in other videos

Channel: Laravel Daily

Views: 107,045

Rating: 4.9699149 out of 5

Keywords:

Id: 4uVNz9sQn18

Length: 22min 28sec (1348 seconds)

Published: Fri May 22 2020

Reddit Comments

[u/PeterThomson]

Or use Intertia. JS and do it in under 5 mins.

[u/IggyBielskis]

WHOA THAT WAS EXACTLY WHAT I NEEDED!! I just decided to take the plunge and start learning Vue. The question of how I was going to integrate with my current Laravel project was floating around my head all day and you nailed it!

Thanks! Subbed to your channel

[u/Coclav]

Funny we are looking at doing the opposite!

[u/zdcovik]

Great content! Nicely explained for the beginners.

You don't have to run 'npm install' every time you make a change. You only need it for the first time and when you add new packages.