Laravel 5.8 Tutorial From Scratch - e26 - Vue Basics 101

now that we have our front-end setup we can start actually developing before we do any front-end development though we need to make sure that behind the scenes we are always recompiling our code so let's switch over to the terminal and run npm run watch remember this is the command that keeps watching our files if anything changes it automatically triggers a recompile so when you have a compiled successfully we are ready to start development all right so let's head back to phpstorm so I want to take some time to start talking about the basics of view now view is a framework of its own and really requires an entire series for us to explore everything that it can actually do the simple goal of this lesson is just to get your feet wet we're not going to be able to touch on any of the advanced things that view can do all I want to do is create a simple component based off of the example component that actually ships with laravel so let's take a look at that right now if we're going to resources Jas and then components there is this example component and this is the basics of a view component think of a view component as an all-in-one file that contains a template meaning something for you to render on the browser a script section which is where all of the JavaScript and view stuff will actually live and then typically you'll have another one for style which is where the component specific CSS styling lives so when you compile all of this it will actually take care of separating the template the script and the style you don't have to worry about any of that now if you haven't explored any of the modern JavaScript this single file concept will take a little bit of getting used to because we are kind of afraid of having this extremely large javascript file that is difficult to navigate through but if you componentize your application all the way around all of your components actually end up being extremely reusable and small there's no need for you to have a gigantic component rather you want to have small components a lot like when we talked about controllers you want your controllers to be small only really have a couple of lines in them in the case of view components they're also free you can use components inside components inside components and the whole point of having components is that they are reusable so what I'd like to do is turn this example component into a button and I know a button is a very simple component that you can use throughout your entire website so that way our app has a specific component to use every time it needs a button so that's gonna be a cool example of how to use a view component so let's start with the basics I'm going to go ahead and erase everything and the most important gotcha that everybody runs into right away is that a view needs a parent div that covers the entire template so the very first thing you need to do is just open a div and don't touch it everything else will be inside of this div so always keep that in mind let's start with a very basic button and we'll say that we want that to have a type of submit and we'll make that customizable and let's put some text in it just for now my button and we see that we do have a console log inside so just the basics of export default mounted is just an event so when view mounts the component it will call whatever code is inside of here think of that as the jQuery document ready type of thing whenever the view component is ready to go that's when mounted gets called and this is typically will you will trigger any Ajax calls or anything like that that you need to use so we'll keep that blank for now and let's just add some styling just for our button so let me add a class of my button and I want to say that my buttons will have a background color of let's make it a dark grey and now let's apply that class to our button class my button all right now how do we use this component well right now it's called example component and what I want to show you is we open up the app that j/s this is where that component gets initiated and actually put inside of our compiled file if you make a component you have to register it so this is where you register it a lot like when we talked about creating a middleware you create your middleware but then you need to register it with the app same exact thing so let's change the name I'm gonna change this to my button and let's change the name of the actual view file to my button all right so let's refactor this to change the name rename my button dot view refactor safe and now we get an error and there we go now we get it build successful throughout all of this you're gonna see this window keep popping in and out it just means that webpack is continuing to recompile our code alright so now that we have this how do we actually use this component let's go to home so anywhere in our code we're gonna use an HTML like sink tax to actually add our component so I'm gonna say my button and that's it so now my button will be translated into this template right here let's hit save let's head back to the browser and see if we made any mistakes so there we are so we have my button right obviously it doesn't do anything right now let's do a little bit more styling on it let's make that a color of white let's add a little bit of padding let's do maybe 10 and then 5 all right so 10 pixels 5 pixels hit save you see it recompile let's head back refresh alright that's looking a little better let me go ahead and make this maybe 15 let's go back refresh and that's the flow you're gonna make some changes you're gonna go back you're gonna hit refresh and you just got to wait for it to recompile sometimes let's give it a little bit more padding hit safe go back hit refresh there we go that's looking better now let's give it a font weight of bold save recompile so our button is looking okay now what I would like to do is I would like to be able to customize the text for our button now one fantastic thing about view is that it is data-driven that means that you don't have to dive into the DOM pick an object by ID or class and then save that to a variable and every time you need to access it you need to go back into the DOM and change that it is reactive so let's change that button and what I'll actually use be text and V text allows us to bind into this button so let's use text so this text variable I want to be able to customize it from out here so I want to be able to say something like text equals my new text button so if it's working that is the text that I want to display inside of my button so to make that work we need to accept that as a property so we could say props and props accepts an array of props and the prop that we're accepting right now is text so let's put that in quotes text let's hit save let that recompile hit refresh and there we are so my new text button so that is working and then the other thing I want to do is I want to be able to customize what type of button this is so to do that we can actually put colon in front of type which turns this into a binded property and instead of cement will say type so now we can accept a prop of type we can come back here and say alright so my type is gonna be submit it's safe come back hit refresh and everything is working just fine so from here now instead of using just a regular button we've wrapped a button around this my button class and every time for example we need to change anything about our button styling we just come to this one view component and change it one time to change it in the entire app and that's the beauty of it so that is a very basic example of a button there is one more thing I'd like to show you in this video to wrap it up on the basics of view and that is how to fetch some data from the back end let's dive back into app KS and let's take a look at this bootstrap if we click through this file we see that down here there's this window that Axios Axios is a library that allows us to fetch data from the backend it makes this process very very simple so the first thing I want to do is let's work on the PHP back-end for this so I want to make a dedicated controller for that let's do PHP artisan make controller testing view controller obviously this won't do much we're just playing around with view right now so let's head back to phpstorm and let's go to testing view controller and I'm just gonna make a dummy index method here that simply returns maybe some JSON data now notice that I'm using an array syntax levo will actually convert this to json by itself even though we're returning a PHP array in the backend level will actually give us a JSON data so I'm just gonna say name John Doe and we'll just keep it simple with a single name equals John Doe so I want to be able to fetch this data through view now in order to be able to do that of course we need to set up an endpoint for ourselves so let's go ahead and do that now now we've been talking about the web routes right and we have all of these web routes right here but this is going to be an endpoint for an API there is actually a dedicated file for API routes let's take a look at that now if we dive into the routes folder let me close resources routes you see that we have web which is what we've been working with but we also have API so let's take a look at this file so let's add a route to API instead let's say I want a post route and I want it to be testing or maybe just view and we know we're gonna hit that testing view controller at index now this API route actually has a prefix of API so you always have to prefix all of your routes with API so this route will actually be API slash view now you don't have to explicitly add that it will do it by itself that's it safe and I think we have our endpoint sort of set up and ready to go so how do we fetch some data let's do it right here right up mounted just for now and let's just say axis dot Coast and where are we posting API slash view right let's go back to API so this is what we're targeting now remember anything inside your API routes directory needs to be with an api prefix and that's what this is right here now if we had any data to pass through we'd pass that as an object in our case we don't have anything right now and this actually returns a promise we'll use the dead notation so inside of here we'll say we'll have a response which means it succeeded we'll use the arrow syntax and in here we'll actually have a response object so let's save our data let's just say this dot test and we'll add that now in just a second equals response dot data this test value we need to initiate that so let's add a data property data properties have to return a function and let's return an object out of here and we'll just say test and we'll set that equal to no just for now let's add a comma here at the end so how do we use this dot test just for the time being I want to use it as our V text so instead of text let's say test let's hit save let's go back to the browser hit refresh and sure enough we have name equals John Doe and that makes sense because we're actually returning a JSON object so let's fetch test dot name hit save go back hit refresh and sure enough we see John Doe right in here so as you know we're actually fetching that through an API route that is hitting this controller right here and we're returning John Doe so if I change that to another name hit refresh and there we are so with this basic example we've been able to fetch some data from the backend and bring it to our front end and this is something that you're going to do all the time so let's recap everything that we did so we made a new view component that we're planning to use as a button for our entire project now on the original implementation we were passing in some data right through here and we can still do that of course you can have as many of these these are called props and they need to be declared down here so we declared a text prop which belongs to this text prop right here and we declared a type prop which is right here but then we took it a step further and we made a very basic example of how to fetch some data from the back end and we used Axios for this axis created a post request to an api route slash view and then on a successful response we saved the response data to this dot test now this the test of course was declared in a data object and this we're setting it equal to no but we know that when the component is mounted everything in this block will run and that's what it actually fetched the data from our back-end now to make this work we made this testing view controller which simply just returns a PHP array now let go behind the scenes we'll take this array and actually convert it to JSON because it assumes that you're just trying to fetch some data through an API now in terms of our routes we did not declare route in our typical web routes file we declared it in our API route file now the real reason why we went with the API route is because this has slightly different middleware to accept API requests and is specifically tuned just for that so this is where all of your API endpoints will actually be so we declared a new route of method post called view notice that view our route in here does not have that API prefix that is not necessary any route inside this entire API file will always have that API in front of it so we declare just as view but in our component we do have to call API slash and then whatever you put in your route and then we simply call testing viewcontroller at index and through all of the magic of laravel we hit refresh and sure enough our button is fetching its name through the backend so those are the basics of view we'll cover a lot more about view in its own dedicated series but this will get you through the very basics of you

Channel: Coder's Tape

Views: 40,738

Keywords: laravel vue js crud, laravel axios post example, laravel mix vue, laravel fetching data from database, fetching data in laravel, laravel vue tutorial, laravel npm install, laravel frontend tutorial, laravel node modules, laravel webpack tutorial, laravel 5.8, laravel front end, laravel vue setup, laravel mix, laravel mix 5.8, vue js, laravel vue, laravel, npm run watch laravel, npm run dev, laravel vue.js, vue, laravel api, vuejs laravel, full stack vue

Id: BoYQpwvKLuE

Length: 15min 57sec (957 seconds)

Published: Tue Mar 12 2019