Laravel 5.8 – From The Ground Up - Laravel 5.8 Tutorial From Scratch – e26 – Vue Basics 101

Education, Programming

Laravel 5.8 – From The Ground Up

52 Lessons

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

Vue is a modern Javascript framework that is powerful but yet simple to understand. In this episode, we are covering the basics of Vue by setting up a reusable button component. We will wrap it up by fetching some data from the Laravel backend using Axios.

For the best experience, follow along in our interactive school at https://www.coderstape.com

Resources
Course Source Code
https://github.com/coderstape/laravel-58-from-scratch

Hit us up on Twitter with any questions or comments @codertape (https://twitter.com/CodersTape)

About This Course

Ready to get started on your path to Laravel Artisan? In this series, we are breaking down all of the basics of Laravel to get you comfortable using the world’s most popular PHP framework. Let’s get started!

    add to database laravel admin laravel artisan Artisan Command artisan commend create artisan console artisan laravel command authentication in laravel belongsto belongsto laravel example coding tutorials create artisan command create command artisan create new command artisan Create your own crud laravel crud laravel tutorial crud resource laravel crud with file upload custom artisan commands custom artisan commands laravel custom laravel database configuration laravel database relationship digital ocean dotenv eager loading eager loading in laravel eager loading vs lazy loading laravel eloquent eloquent accessors eloquent mutators eloquent orm feature testing laravel fetching data in laravel filesystem laravel form requests full stack vue gate and policy laravel google optimize hasmany hasmany laravel hasmany laravel example hasmany relationship in laravel hasone hasone relationship in laravel How to create how to queue email how to use queue installing laravel intervention image laravel laravel 5 laravel 5 auth laravel 5.4 queue laravel 5.5 queue laravel 5.8 laravel 5.8 artisan command laravel 5.8 artisan console laravel 5.8 auth tutorial laravel 5.8 authentication laravel 5.8 commands laravel 5.8 crud laravel 5.8 crud example laravel 5.8 custom middleware laravel 5.8 deprecations laravel 5.8 eager loading laravel 5.8 elixir laravel 5.8 event listeners laravel 5.8 events laravel 5.8 feature laravel 5.8 features laravel 5.8 global middleware laravel 5.8 install laravel 5.8 lazy loading laravel 5.8 listeners laravel 5.8 middleware laravel 5.8 multi auth laravel 5.8 named resource routes laravel 5.8 named routes laravel 5.8 new feature laravel 5.8 own artisan command laravel 5.8 queue laravel 5.8 queues laravel 5.8 routing laravel 5.8 telescope laravel 5.8 tutorial laravel 5.8 user auth laravel 5.8 user authentication laravel 5.8 what's new laravel 5.9 laravel admin permissions laravel api laravel artisan command laravel artisan console laravel assets laravel auth laravel auth role laravel authentication laravel authorization laravel axios post example laravel background process laravel background task laravel background worker laravel beginner to master laravel belongsto laravel belongsto vs hasone laravel belongstomany laravel best packages laravel best practices laravel best tutorial laravel bootstrap laravel command laravel command line laravel commands tutorial laravel composer install laravel connect db laravel console command laravel console testing laravel contact form send email laravel controllers laravel create laravel crud laravel crud policy laravel custom command laravel custom middleware laravel database laravel database configuration laravel database relationships laravel database seeder laravel database settings laravel db seed laravel db settings laravel debugging laravel deploy aws laravel deploy digital ocean laravel deploy on digitalocean laravel deploy on server laravel deploy to production laravel deployment laravel digitalocean laravel drag and drop file upload laravel dropzone file upload laravel dropzone image upload laravel e-commerce laravel eager loading laravel eager loading tutorial laravel eager loading with condition laravel elixir laravel eloquent laravel eloquent belongsto laravel eloquent crud laravel eloquent hasmany laravel eloquent where laravel eloquest tutorial laravel events and queue laravel events tutorial laravel factory laravel feature test laravel feature testing laravel fetching data from database laravel file storage laravel fillable example laravel flash message notification laravel for beginners laravel form validation laravel forms laravel forms bootstrap snippets laravel from scratch laravel from the ground up laravel front end laravel frontend tutorial laravel gate and policy tutorial laravel global middleware laravel hasmany laravel hasone laravel i18n laravel installation laravel installation mac laravel intervention image tutorial laravel javascript tutorial laravel jobs queue laravel language laravel language switcher laravel language tutorial laravel languages laravel lazy loading laravel listener event laravel listeners laravel localization laravel login laravel mailable tutorial laravel many to many relationship example laravel markdown email laravel markdown mail laravel mass assignment laravel middleware laravel migrate fresh laravel mix laravel mix 5.8 laravel mix vue laravel model factory tutorial laravel multiple language laravel mysql json laravel named resource routes laravel named routes laravel new features laravel news laravel nginx laravel node modules laravel npm install laravel npm run watch error laravel one to one laravel paginate laravel paginate link laravel pagination laravel pagination 5.8 laravel pagination links laravel pagination tutorial laravel phpunit laravel phpunit testing laravel pivot table example laravel policy laravel preview laravel query optimization laravel queue laravel queue event listener laravel react laravel register user laravel registration laravel registration validation laravel relationships laravel reset password laravel role middleware laravel role permission laravel roles laravel route group middleware laravel routes laravel routing laravel routing with parameters laravel sass laravel save file to database laravel scopes laravel seo tutorial laravel server laravel session data laravel ssl laravel supervisor laravel tailwind css laravel tailwind setup laravel tdd laravel tdd tutorial laravel telescope laravel telescope installation laravel telescope tutorial laravel test driven development laravel test workflow laravel testing laravel testing controllers laravel testing tutorial laravel tools laravel translation laravel tutorial laravel tutorial for beginners laravel ubuntu server laravel ubuntu tutorial laravel unit testing controllers laravel upload file laravel upload image to storage laravel upload multiple files at once laravel upload multiple image to database laravel upload multiple images laravel url slug laravel vue laravel vue js crud laravel vue setup laravel vue tutorial laravel vue.js laravel webpack error laravel webpack tutorial lazy loading lazy loading laravel lazy loading vs eager loading learn laravel learn laravel framework step by step localization in laravel localization laravel many to many laravel mvc tutorial for beginners in php mvc tutorial laravel mysql mysql relational database mysql relationship n + 1 problem n + 1 problem laravel new artisan command npm install npm run dev npm run watch laravel one to many one to one one to one laravel own artisan command pagination pagination bootstrap pagination bootstrap php mysql pagination laravel pagination laravel bootstrap pagination links pagination php php php artisan php carbon immutable php framework php framework 2019 php what's new 2019 phpunit phpunit laravel phpunit testing pivot laravel policy laravel polymorphic relationships queue and events queue email queue for laravel queue jobs queue laravel 5.8 registration form relationship laravel eloquent relationship mysql restful controller role permission in laravel roles laravel route model binding laravel routing in laravel save image to database seo friendly seo friendly content writing seo friendly website seo laravel seo optimization simple pagination laravel slugify sqlite relational database sqlite relationships between tables symfony command console symfony laravel tailwind css tailwind laravel mix telescope laravel tutorial laravel unit testing unit testing laravel upload file laravel upload file php upload image laravel upload image to database php upload images laravel upload multiple files in php url slug laravel url slug php vue vue.js vuejs laravel why use laravel queue why use queue