From Laravel Blade to Vue.js 3: Live-Coding Demo

hello guys on my channel i have a few very popular videos one of them is transforming blade to api plus vue.js it has more than 130k views and i decided in this video to refresh it this one was done more than one year ago with older versions of ugs and laravel and i want to show you a different example with laravel 9 and vue.js 3. so let's transform this simple dashboard list of products from laravel controllers from typical laravel mvc into api with vue js3 and first question why would you need to do that why would you transform blade into vue.js the main reason could be one of the reasons is to load the page quickly and then transform parts of the data from the api a bit later so for example you load the page which is empty then you have loading spinner and then the data of that list comes a bit later in half a second or so of course you can go further and build a typical spa single page application with only vue.js at the core architecture and then api on the back end but even transforming one page from blade to api with vue.js may be a better user experience now how to do that so the initial project is typical laravel laravel breeze installed but instead of login and register i just created a dashboard with one route so home controller dashboard without any auth and in that controller we load all the products and view the dashboard with the products and that dashboard blade just contains the products with for each so let's transform this part to load dynamically with vue.js from the api first we need to build that api so we need to build the api route and controller to get all the products to do that we generate that controller php artisan make controller and let's call it product controller but with api as a subfolder it's a common good practice to separate the controllers into subfolders and namespaces which will be created automatically by the way as well as the folder so product controller and if we open that product controller as you can see the namespace is automatic and let's create one method index public function index and we will just return product all as it is and then in the routes api file we need to create that route so route get products we will assign it to product controller class and method index let's close the sidebar so you would see that and by default routes from routes api php file are loaded with the prefix slash api so if we go back to our page and load api products the result is working we have the data of course it's not pretty to read it's json structure so for reading the api calls i advise to use some kind of api client probably the most popular is called postman here i am in postman and i launch the same api call send and the result is much more readable so we have id name description and price for every product this is exactly the structure of the database so you can see that api is working but there are a few problems with that result it loads all the data from the database but in fact api doesn't need to return all the data if we take a look at the page let's go back all we need for each product is name price and part of the description and price should be transformed as well so first we don't need create that unupdated ad the page doesn't care about that and price should be transformed price in the database is saved in cents not in dollars so we need to divide that by 100 and format with two decimal places you can read a lot of articles online why you should store money data in cents in integers instead of floats it's because of potential rounding mistakes so to avoid that and also we need to cut the description to 50 characters so to do that laravel has such a thing called api resources to transform the data from the database into actually what you want to return from your api method so we need to create a resource class php artisan make resource product resource like this and then it is saved in app http resources product resource by default it is to array with parents to array meaning it would return exactly the same array but we replace that with our own array and what fields do we actually need to return we need to return id and this will be the same as the original original is this so this id will return then name we need this name description will be transformed for example substring this description to 050 characters and then dot dot at the end and then create a titan updated we don't return that at all and for price we return number format from what i remember this price two decimals and then divide by 100 and now to use that product resource in the controller we replace product all or in fact add something to product i'll add the transformation layer which is product resource collection method and parameter of that collection is actually product all so what will happen the query to the database that returns product all and then another layer another filter of transformation with that product resource and now if we launch that with our postman we send the same request and this is what we get id name shortened description and price in dollars and cents and also you see one new thing called data so if you use eloquent api resources by default all the data is wrapped in another layer of data it's a good practice to potentially have more data coming back like error messages like for pagination for example there's data and then there's next page and previous page and stuff like that so laravel kind of offers you suggests you to wrap it up in the data and we will use it in the vue.js a few minutes later so we have our api ready now we need to create the vue.js component that would load that api by default in laravel we don't have vue.js installed so in package.json you have dependencies for the front end some of those dependencies come from default laravel some of them come from laravel breeze that i've installed for the front end including like tailwind for example but we need to install vue.js manually so what we do is npm install view and then you need to provide the version currently at the moment at the time of shooting this video vue.js 3 is the official version which you can specify by providing view next or view 3. let's go with view next and it will install vue.js and it's similar to composer install for those of you who are not familiar with npm install so with laravel composer json contains the packages so if we open that up composer json is the set of packages and when you run composer install it requires all the packages and installs them into a vendor folder similar with package.json it installs all the front-end packages into node modules folder so same logic but just different behavior to a different folder so we installed vue.js now we go into the main file of laravel project related to vue.js and javascript in general it is resources js app.js by default the fresh laravel project contains only required bootstrap and nothing else those three lines that i've just deleted they come from laravel breeze which use alpine js which we don't use in this video at all so i can safely delete that so here we need to initialize vue.js and create a component to create a component we open our dashboard blade and our goal is to transform this into vue.js component so we have a grid of products and instead of that product grid we will have vue.js component and let's call it products grid something like that like this so this will be our final result and it looks like html tag right and we will create the vue.js component which we will assign to that html tag so we just copy everything from for each here from blade file into our new component which we will create in resources.js let's create a subfolder called components and then we create products grid dot view file it's a common practice to have camel case names if you have for example two word vue.js components so we create products grid and every vue.js component consists of two parts template and script like this so template contains the html code so what is actually shown so we paste that from the blade and we will replace for each in a minute because vue.js doesn't know anything about blade syntax and for each but basically this is what we'll have in our component visually and script will contain the code to call the api get the result and assign the variable which we will use instead of products but for now let's just delete all that for each loop and put static text in here for example coming soon so i will show you that the page is loaded actually from the view js and not from the blade then in resources.js app.js we need to initialize view and for that we do import so-called create app from view so vue.js is installed already and from that view remember we did npm install view from view we need to load the function it is the function called create app and then we actually use it create app in our simple case create app will not have any parameters we just assign that to app create app and then with that app we can add components like for example app component products grid the one that we have created in the html then we need to define component here and we import that component import let's call it products grid in camel case from the same folder dot slash components phpstorm auto suggests it to me product grid dot view and dot view is optional and now we can use it to products grid a few things to fix here by the way the empty parameter should be empty object for the create app and before app to define that we need to add const in javascript and now we can load the component as product grid and then we need to mount that vue.js application to one of the html tags in our application in the blade app mount to the app it's called root container and that root container means that anywhere in your global dashboard blade or layout blade for example based on laravel breeze we have blade component for x app layout which leads us to app blade and somewhere here in the main app blade we should define id app which means that inside of that id app it will load all the vue.js application and inside of all of that vue.js application anywhere in the blades inside of that div there could be vue.js components like in the dashboard we will have this products grid initialized within that id app so this is what is meant by mount to app and now it's time to compile it all compile our vue.js application and check if we have coming soon on our page instead of the grid for those of you who haven't worked with ujs applications or any front-end applications here's how it works in the resources.js app.js you provide javascript code which loads the components and various settings and then npm compiles that into public javascript files so whenever you run npm run dev or there are other options like npm run prod and pm run watch and i will talk about them in a minute it compiles everything in resources js into public js app.js so you don't need to manually edit public js app.js you need just to load it in your main layout in our case for example there will be app blade which will load asset js app.js we will just change it from asset to mix because we're using larval mix under the hood together with laravel breeze it's another tool from laravel ecosystem to mix the assets it is called mixed for a reason it's mixing everything from resources.js and make the public file so we use mix here and to do that we need to open another file called webpack mix.js in the main folder of laravel which is partly generated by laravel breeze with css stuff and we need to also add view here so mix js post css and before that we need to add view so it would compile vue.js as well and now we run npm run def npm run dev later in this video we will also run npm run watch and i will tell you the difference and now we have built successful by laravel mix as you can see the final file js app.js is 1.42 megabytes it seems a lot but for production you can compile it to much smaller file and let's see how our page looks like finally we refresh it so we have our dashboard let's refresh it and we see coming soon text here from our vue.js component so this is the proof that it actually works and actually if i refresh the page keep an eye on when this is loaded and when the text is loaded i refresh and as you can see coming soon comes a bit later again and this one loads immediately and this one a bit later so that's the whole purpose one of the purposes of transforming the page into vue.js with api so this is loaded instantly and the internal part comes a bit later from the api and let's work on exactly that transforming coming soon into actual grid from the api for that we go back to our component of products grid for now we don't have any grid and let's return the for each here and let's transform it into vue.js for each for that we will transform that div into for loop div v4 this is the syntax and we have product in products we will have a property products of that component we haven't created that yet then basically for each of products and product will be the item name inside of all of that div we have access to product dot something so instead of this product dot name we have vue.js syntax of product dot name instead of this number format here we don't need to format that anymore because it will come from the api as correctly formatted already so all we need to load is product dot price same here for the description we don't need any substrings anymore it will come from the api from the resources of eloquent eloquent api resource product description dot dot will also come from the server and we don't need that for each and we don't need that and for each so we have the template now in the script in the script part we define that products how you may find different syntax for vue.js versions and in vue.js three you basically have two options use older options api or newer composition api in this video i will use older options api so you would be able to use it even in vue.js 2 or maybe you can still proceed with vue.js 3 with the options api and that's totally fine but for more complex project it totally makes sense to use composition api and for that i have a separate video and a separate full course and i will link that in the description below but for now let's go simple and do export default this is the syntax of what we export to the template we need to export the data that we can use here so data would be a function data and we return return the object of products by default empty array and as you can see products here is not underlined anymore so vue.js component template recognizes products as variable to fill the products we need a method to get that from the api that's why we define methods for example let's call the method get products without any parameters and in here we use a library called axios which comes by default in laravel this is one of those package json things that come by default in laravel without even laravel breeze it is used to perform http requests so we need axios request axios get to the url of slash api slash products remember the one that we have created the api and when we get the result of that we can use then we have anonymous function with response as a parameter and inside of that function we assign this products equals to response from the server from the api data dot data this sounds confusing but response data is what actually comes from the server and the data is because of eloquent api resource that we used in the postman this here so it's the same name but it actually means different things if you don't have the data wrapper here from the api then you don't need this layer but in our case we do need that and we have this products and finally what we need to do here is to call get products as soon as our component is loaded or in other words mounted so our third parameter is mounted on mounted we do what this get products and now as you can see nothing is underlined everything is recognized by the same component in phpstorm so should be no errors now if we refresh our page nothing would change until we recompile the thing you need to run npm run dev again or to avoid that you can run npm run watch which will watch for any changes in resources.js app.js and will recompile it automatically so now let's run npm run watch which will do the same thing as npm run dev but additionally we'll watch for the changes so build successful and now if we refresh our page instead of coming soon we should have something different refresh and we have our grid of data with the price with everything that we needed and to show you the npm run watch difference let's change for example dollar to euro for example i click save in phpstorm and as you can see build successful already without me running npm run dev or recompiling so it recompiled public js app.js in the background and now if i refresh the page i have euros here so that's it we transformed our blade component blade page into vue.js with api let's run through that again and summarize what we actually did first we created the vue.js component which loads the data from the api with axios then we build that api in laravel in eloquent api resources to return already transformed data which we can use in the template part of the component here name price and description already transformed from the backend then we load that productsgrid.view in the app.js as a component as a component of vue.js application that we load with create app from view we mount all of that to the id app which is in the main app blade id app here to load all of that we installed vue.js which is then in the package.json in the dependencies view here it also installed view loader under the hood behind the scenes although i didn't specify that specifically and to recompile it all in the webpack mix we need to also compile view here all of that will be in the repository on github for free so you can play around with that yourself maybe make some changes and build some more stuff so i hope this quick almost live coding lesson will be useful for beginners so you would not be afraid of jumping to vue.js or learning vue.js of course there's much more to learn and i have a bit more complex example but still for the beginner so i would advise it as a next step here on my laravel daily teachable com vue.js plus laravel 9 crud as a single page application so you will become familiar with routing with composition api that i've mentioned already in this video and some more complex stuff in almost three hours if you have any questions shoot them below and subscribe to the channel to get videos on laravel and vue.js and other related topics in the future see you guys in other videos

Channel: Laravel Daily

Views: 22,489

Keywords:

Id: eSrqltokP6k

Length: 21min 52sec (1312 seconds)

Published: Wed Apr 27 2022