Vue JS Crash Course 2021

[Music] hey guys welcome to my view js crash course for 2021 so this is an update from my 2019 version and we're going to be going over all the fundamentals of vue.js by first building a very small project using just the vue cdn and then we'll jump into using the cli to scaffold out a larger task tracker application and if you watch my react crash course that i did about a month ago it's the same exact application that i built in that video except we're using vue instead of react now we are using version 3 of vue.js however just about everything that we do here also applies to version 2 with the exception of a couple small things we're not going to be covering the composition api in this video however i will do a separate video for that all right so we're just going to look at some slides for a few minutes and then we'll jump in and get started so first of all what is vue.js it's a front-end javascript framework for building websites and user interfaces very similar to react and angular in fact vue react and angular are basically the biggest front-end javascript frameworks that are used right now and view is generally used to create single page apps or spas that run on the client but it can be paired with back-end technologies like node.js python php c-sharp basically anything that can run on the server to create you know powerful full stack applications you can also run on the server side by using the next server side rendered framework which is similar to next for react so why use view over let's say vanilla javascript and some of these are relative to all front-end frameworks because they do do a lot of the same thing but they allow you to create dynamic and interactive front-end applications and websites out of react angular and view which are the the big three i think that vue has the easiest learning curve with react you have a lot of specific terminology that you need to learn where view in my opinion is closer to just being structured javascript view is easy to integrate into other projects you can simply include the cdn right in your html and you can create specific view components or elements for your website it's it's a fast and very lightweight framework it uses a virtual dom much like react where it only updates things on the page that need to be updated rather than refreshing the entire page and it is very popular i wouldn't say it's as popular as react but it seems to gain more traction every year it also has a great community with react you have facebook behind it you have google behind angular vue.js doesn't have a large corporation behind it and it's still able to be you know one of the top three contenders for front-end frameworks now as far as what you should know before learning vue.js i'd say just about the same that you should learn before any front-end framework and that's javascript and obviously html and maybe a little bit of css so you want to know the fundamentals of javascript you're going to deal a lot with asynchronous programming so it's important to know how to work with things like promises array methods are really important like for reach and map and filter regardless of framework or even in vanilla javascript you're going to work with these a lot in many cases you're going to be dealing with some kind of api some kind of back end to make requests to so it's important to understand http requests and the fetch api you should also have experience with npm because you're going to be installing other packages to give you extra functionality or npm or yarn all right so this is the app we'll be building again if you took the react crash course it's the same exact application and what i've done is on the right here i've outlined all the components because you when you're using a front-end framework you want to think of your user interface in terms of of different components you know the search bar the navbar whatever it might be it's going to be a separate component so in this case we have the header outlined in orange so that's the header component we have a button component here and these are all reusable we can add props so for instance we could create a button here and then put another one somewhere else and maybe have a color prop to make it a different color a text prop so it displays different text so these are reusable components then we have the add task component in green which is the form and this button will toggle this form and then down here we have the tasks component wrapped around all the tasks and then each individual task is also its own component all right and then we have a footer that just has a link to the about page so towards the end of the crash course we're going to be looking at the view router and how you can you know have different routes in your application so in the code a view component looks something like this you have three separate areas you have your template which is basically your output your html here you can have html tags you can have expressions and variables using declarative rendering then we have our javascript our logic from here you can declare props you can declare specific data that is is linked to your component you can have methods and so on you can link you can hook into cycle methods as well and then you have your style and you can add this scoped to your style and if you have that that means that anything in here is only going to pertain to this specific component so in this case this is only going to style this header tag any other header tag on the page isn't going to get styled and then to actually embed the component you would do it like this so pretty much like an xml tag and you could pass in props just like you would pass in an html attribute so we have a title getting passed in and then we define it here and we could use it up here all right so that's just a very simple example but we'll be getting more into this as we move along so like i said components can have data or state associated with them which will determine how specific components behave and what data is displayed so data can be local to a component or it can be global or app level where it's shared with multiple components and there's different ways to handle app level state if you have a lot of app level state or data you might want to use something like vue x which is a state manager that's similar to redux so if you have a large application where you have maybe products categories users and a bunch of different resources you probably want to use something like vue x now view three has a new composition api which aims to address code reusability and readability traditionally components use the what's called the options api that's what we're going to be using here although like i said i will be doing a separate video on the composition api and then finally i just want to talk about the view cli which is is the standard tooling for vue.js development it's a command line interface to scaffold projects it has its own gui view manager if you want to use that it's it's completely optional but that is offered it has a dev server and an easy production build tool it has integrated testing type script support view x support so this is what we'll be using to set up our task tracker project all right so enough with the slides let's go ahead and jump in and learn vue.js all right so like i said we're going to start off with a pretty simple project we're going to create a random user generator and we're just going to use the view cdn and then later on we'll move on to our task tracker application where we'll set everything up with the vue cli so this is the vue.js website right now for version three you need to go to v3.viewjs.org but in the future this will be the the landing page for just vue.js.org right now if you were to go there it's going to be the version 2 documentation with a link up here to go to version 3. all right so if we go to let's say get started and let's click on installation you'll see that it'll give us a link to the cdn so this view at next is going to be whatever the latest version is right now i believe it's 3.0.5 so i'm going to go ahead and just copy this and i'm going to open up vs code and i just have a folder here called random user gen and it has three files it has an index html which is empty and app.js which is empty and then a style css with just some basic styles here and i'll have the code pen for this small project in the description if you want to grab the css and follow along so in the index.html let's just go ahead and create a boilerplate and for the title we'll say random user generator and then i'm going to add my link to my style sheet and then down here in the the body let's go ahead and paste in the cdn now like i said this is going to give you the whatever the latest version is i'm going to specify 3.0.5 and then i'm going to add my script tag to my app.js file as well and then in the body all i'm going to have here is a div with the id of app okay so i'm going to save that and basically if you've ever worked with a front-end framework or i should say a single page application all of the everything we do as far as creating components creating our ui is going to be within the javascript and then that loads and it basically spits it out here it's output into this div all right so we're going to jump into our app.js file now and we're going to create a variable called app and we're going to set this to view so capital v ue and we have access to this object because of the cdn and then we're going to call create app okay and then this takes in an object and we can pass in different things here such as a template so for now i'm just going to put an h1 in here and we'll just say hello world and then if we want to mount this app to that div that i put in the html we can simply do app dot mount and then just pass in whatever the selector in our case it's going to be the id of app so i'm going to save this and now i'm going to open this file i'm going to open it with live server but you can just open it on your you know in your file system if you want and you'll see we get hello world so it's putting out what we have in the template here now in this case we're just kind of using you know we're using the cdn you would do if you want to build a small project with view you could do it this way we're not going to have multiple components or anything we'll get into that with the task application but we can add data so if we go right here now data is going to be a function and it needs to return an object okay and i remember when i started learning view i used to do this data like as an object but you just want to remember that it's going to be a function that returns an object and let's say in here we'll say first name and we'll set that to john and then up here in our template we can use that with declarative rendering and we do that with this with double curly braces so it's similar to if you're familiar with react it's similar to you know interpolation and react with single curly braces except with view it's going to be double and we can just output you know first name so if i save that you can see we get hello john now we could do everything right here in the template but we can also just take this so i'll cut that we'll just get rid of the template here and then we'll go into our html and as long as we're within this div with the id of app we can go ahead and we can use any data we have in our view app so you can see it's still spinning out first name now if i were to put that down here see it renders down here and it doesn't actually give us the first name it just gives us the actual the literal uh characters so it has to be within this this main app div because that's what we mounted this to all right so let's actually add some more data here i'm just going to grab real quick just copy it so we have a first name last name we have an email uh gender and then picture and we're using the random user dot me api for this so we have some data let's go to our index html and let's take uh we'll get rid of this here and let's just do first name and then we'll do last name so we get john doe under that let's put in h3 we'll say email colon and then we'll put in the email and then we're going to have a button and for the button i'm going to say get random user and we're not going to deal with the button just yet i want to show you if we want to put the image in right so we have this this picture value which is this url which is in you know an image to some guy and i want that as the source value here and you might think we can do something like this picture you can do that in react but we can't do that here in view we have to use something called the v bind directive so instead of just source we would do v dash bind and then colon and then source and we don't need to have these um you know these curly braces so it would just be picture and this is going to this is going to be the dynamic variable because we're using v bind so if i save that you'll see it'll actually use the picture url as the value here now let's say we want to put the name as the alt value we can do the same thing here so we can say vbind colon alt and in here we can put first name and if we go ahead and open up the dev tools here and go to elements let's make this a little bigger here and so you can see where is it uh div with the idea of app image and the alt is the first name now if we want to have the first name and last name what we can do in here is add in backticks so just like you know javascript template literal and we can add money sign curly braces around the first name we can put a space and then we can have the last name and now if we look at the alt it should be john doe now with this v bind there's actually a shortcut you don't have to type out v bind you could just have the colon all right so if i save that you can see it's gonna do the same thing and it's gonna render john doe as the alt so this is the the syntax we'll be using but i'm gonna leave this here just so you can see both you know both versions all right now let's see we know that we have in our data we have gender in this case is male and in my style sheet i have a male class and a female class so the male class has this steel blue border color background color female has the pink border background and then the dark text color so what i want to do here is basically just add a binding to the class of both the image and the button and it'll be you know blue for male pink for female and i hope nobody gets offended by that i just couldn't think of anything else to demonstrate this with so to do that we want to use a class but we want a v bind to it so we want to just add a colon in front of it and then we can just set that to gender because remember that's part of our data right so that's right here so it's going to put that in that class and then we'll do the same thing for the button like that and if i save now you'll see we have a blue outline on the image and we have a blue background color on the button and if i were to go over here and let's change this to female it's going to turn pink okay now i want to be able to click this button and change the user get a random user so we're now going to look at events and everything that i'm doing here we're going to use in the task tracker application as well i just wanted to do something really simple first and show you that you don't have to set up tooling and all that just to use vue.js for something simple now this button here we're going to add an event to so we can do that there's actually a couple ways the first way i'm going to show you is with v dot on and then whatever the event in this case click and we can set that to let's say get user so this is going to call a method within our app called get user so let's save that let's go to app.js and the way that we define methods we can go right under where we have our data and say methods and we can say get user and for now let's do a console log now in this method we can access any any of our data in here with the this keyword so we can say this dot first name all right so we'll go ahead go ahead over here and open up our console and if i click this you'll see i'm going to get john all right so pretty pretty easy pretty clean and structured what i want to do though is change these values to something else so let's actually let's see we'll just i guess we'll copy these and let's change now to access these we have to use this so we'll say this dot first name and we'll set that equal to let's say sam get rid of these commas too so smith and last name so this dot last name let's do this dot email is gonna equal sam at gmail and we'll make sam female and set this to this dot gender and then we want this dot picture and let's set that equal to get rid of this comma and we'll just change men to women all right so when we click this all of this data should change to this data so let's click and there we go all right now obviously it's just gonna it's always gonna be this user so what i'd like to do is use the random user api to to get a random user to get random user data every time we click this and set this data to that all right so uh what we can do is let's go right above where we set all this data inside get user and i'm going to be using the fetch api with async await so we want to just make sure that we mark this as a synchronous and asynchronous function and then let's say const res so response we want to await on fetch and here the url is https uh it's going to be random user dot me slash api all right so then we want to put in a variable we can get the data from say a weight res.json so that's going to give us the json data now what it gives us back is a results array with just a single item with a single user by default so i'm just going to instead of putting it in data let's destructure results and we'll pull that out and then we'll just go ahead and console.log and see what results gives us okay so let's go ahead and open this up and get random user and down here you can see it's logging an array with just one item in it and this item has all this data all this random data we have the cell number date of birth email gender name which is an object with first last and title we have picture which is an object with large medium and thumbnail so i just want to set this instead of setting it to this static data we'll set it to our results so here for the first name we'll set it to results we want the first item in the array and we want name is an object and we want the first name okay and then for here let's say results and we want first item name dot last and then whoops and then we have results and we want the email so that's just dot email and then let's say results gender and then for picture let's get rid of this so picture is going to be an object as well so let's say we want the first item and then in the picture object we want the let's get the large okay you can see that over here get actually i'll just comment that out and let's save and now if we come over here and we click we should get a random user and you can see automatically if it's a female it's going to change color and there we go all right so very simple project but i just wanted to demonstrate how easy it is just to you know throw the cdn in there and use vue.js so now we're going to jump in and we're going to set up our task tracker application with the vue cli okay so we're going to start on our task tracker application now this is the cli documentation at cli.vs.org if you want to check that out if we go to get started and we go to installation we do need to install this globally either with npm or yarn so let's go ahead and open up our terminal and we're going to do i'm on a mac so i'm going to run sudo since this is global we're installing this so npm install dash g and then you want to do at view slash cli all right so now that that's all set we basically have two options here we can run view create and just create our application which is what we're going to do but you also have the option to run view ui and i just want to show you what that does so this will actually start up a graphical user interface where we can manage our view projects so you would see your projects here you can create a new project in a directory then you can install plugins you can install vuex the router and so on you can import projects so i'm not going to use this but i just wanted to show you that it is available if you do want to use it so i'm going to cut that off close that up and we're going to go ahead and run view create and just whatever you want to call this i'm going to call it view crash dash 2021 and it's going to ask us some questions so at this point in time we can choose if we want view version 2 version 3. we can also manually select features which is what i'm going to do just to show you what is offered here so i'm going to keep this selected choose view version and by the way if you're using windows with the git bash terminal you might have some issues with the arrows so you might have to use powershell or something like that i'm not sure if that's still a thing but i know it was at one point babel we're going to keep that typescript if you wanted to use it you could just hit space and check it pwa support the router now usually if you're going to use the router i would definitely suggest selecting it here and just get it set up however we're not going to select it because we're not going to do the router till the end and i'm going to show you how to set it up manually view x which is a you know global state manager css preprocessors like sas lee of lin built in linting and formatting i'm going to actually uncheck that for this and then unit testing and end to end testing so i'm going to leave all these empty and just hit enter and now we can choose if we want view two or three i'm going to choose three and i'm going to choose for dedicated config files and i don't want to save it as a preset so that'll go ahead and set everything up okay so that's all set let's go ahead and just clear this up and i'm going to cd into my view crash folder here and then i'm just going to open vs code in this folder so on the side here you can see all of our files and folders if we look at our package.json i i chose pretty much uh you know the bare minimum so there's not much here we just have view some cli stuff and we have two scripts we have npm run serve which will run our dev server and npm run build will build out our static assets for deployment so when you're ready to deploy and then if we look at the actually you know what let's run the dev server so i'm going to open up my integrated terminal and just run npm run serve not server but just serve and that's going to run it on local host port 8080. so let's say http localhost uh and it's going to be port 8080 by default okay so this is what it's going to give us just a basic landing page here let me just make this a little smaller and now we'll look at some of these files so our public folder we're not really going to need to do anything with but this this index.html is the single page that's loaded in the browser and down here you can see there's a div with the id of apps so everything is going to be spit out here kind of like when we use the cdn and the way that happens is in our source folder there's this main.js and this is like the entry point to view so we're importing create app reporting that method from view and then we're also importing our root app component which is in app.view and down here we're calling create create app and passing in the main app component and we're mounting it to that div with the id of app okay so that's basically the entry point then we have our app.view which is our it's like our root component so everything we do you know is gonna basically go through this file for now um any components we create we're gonna embed in here and you can see it has the three parts like i showed you in the slide there's a template which is the output the html there's the script which is the logic the javascript and then we have the styling all right now here what's happening is we're importing this hello world component which i'm going to delete in a second but i'm just showing you that we're importing that and when you want to use a component you have to define it in here or register it in this components object then you can just pass it in up here and this happens to take in a message prop that's being passed in if we look at the hello world component you'll see it's basically just a bunch of text it's everything you see down here and it's outputting this message prop which is actually defined down here okay so whenever you pass in a prop it needs to be defined here we're going to do all this stuff on our own i'm just showing you the the boilerplate and then there's some scoped styling all right so what we're going to do is actually delete the hello world component we don't need that it's going to go ahead and break because we're importing it so let's get rid of this import and then we'll get rid of right here where we register it and let's get rid of let's see up here i'm going to get rid of the image 2 and for now we'll just put uh let's put an h1 and say hello world now if if you want to use emmet you see how you know emmett works in here if it doesn't work just go to your settings let's do a command shift p and just type in settings and go to your json file and just add this right here so emit included languages and then these two lines all right so that will enable emmet in your view templates and another thing i would suggest is installing the veda extension if you're using vs code so this will give you some highlighting and stuff like that there's other ones as well there's a view 3 snippets extension that i started using on my other machine but right now all i have for view is is as far as extensions is this here all right so as far as the styling goes i mean there's different ways you can do it you can just have one single global style sheet you can put all your global styles down here or all your styles or you could break it up into components so i have some global styles i'm going to put in here i'm just going to get rid of this and paste in basically it's just you know bringing in the pop and spawn a reset a container class and some button classes and you can grab this from the repo if you if you're following along so we'll go ahead and save that and then the container i'm going to wrap around let's go up here and say container and move this into here that'll just push everything to the middle and give us this border around it so i want to start to create some components in the components folder let's create a file called header.view so capital h header dot view and in here we're going to have our template and let's have a header tag with an h1 we'll say task tracker and then for the script tag let's go ahead and export a default object and we'll give this a name of uh header and that's all i want to put for now so we'll go actually we'll add some styling just a little bit and we're going to scope this so we want to say scoped that means anything in here is only going to be for this component so this header tag will only be for this specific component and we're going to display flex because we are going to have a button to toggle the ad form so display flex let's go ahead and justify content to space between and we'll go ahead and align our items to the center and let's add a margin bottom of 20 pixels and then i want to bring this into our app dot view so right up right above the export let's add the import importing header from and that's going to be dot slash component slash header and then we're going to register that component here so make sure you add header here and then we can go ahead and embed it we'll replace this h1 with our header save and now we get our task tracker which is coming from here now let's talk a little bit about props because you can pass props into a component like let's say we want to pass in a title here and we'll just say hello for now and then if we want to work with this title inside of our header component we need to define down here props and there's a few ways you can define them one is just to have an array with the prop name and then up here let's replace this with our double curly braces and in here we'll say title if we do that you can see that it renders hello i'm just going to change that hello now to task tracker and then if you want you can also define it define your props as an object so we can say title and you can specify a specific type so string so you see that'll work as well another thing you can do if you want to take it a step further and have a default value you can add an object with the type and then you can add a default which let's just say we don't need a default but we'll say hello world just to show you how this works and now if i don't if i get rid of this prop that i passed in the default is going to show which is hello world okay we don't actually need that i just wanted to show you we can do that so i'm going to go back to this format all right now i want to have a button over here that will toggle the add task form when we get to it and i want to have a button as a component so we can add multiple buttons with different text and colors you don't have to do that we could just go ahead and put a regular you know button in here but let's go ahead and make it a component so i'm going to go over here to components create a new file called button dot view and let's give this a template and in the template we're going to have button for now we'll say add task and then we'll add our script tag and let's go ahead and export default give this a name of button and just do that for now and we'll go ahead and bring that into our header file so down here let's say import button from that's in the same folder so just dot slash button we have to register as a component so let's say components and button and then we're going to put that right under the h1 here so button oops we want capital b because it's a component not just a button tag now to style this remember in in the app dot view i do have these uh button styles btn so let's actually we'll just add that class here so class equals btn make it look a little better now as far as the text and the color i want to be able to pass those in as props like this so we'll say text equals say add task and we'll say color equals green and then we need to handle those in our buttons so let's go ahead and define props and we'll use an object here we'll say the text which is going to be a string and then the color which is also a string and then we can go up here and let's add right here double curly braces and we can put our text prop here now for the color we're going to add inline style but we're going to bind it so we need to use either you know v bind colon or just colon and then let's add style and we want to set this to it's going to be the background color so i'm going to set the background to the color prop so we'll save that now you can see that it's rendering green now if i wanted to have another button or a few of them we could do that we could change this to like i don't know update task and have that to be blue we could do another button to delete task if i save that now you can see we have these different button components so these are reusable and we can pass in different text and colors now as far as the event whoops as far as the event for this button like i said it's going to be toggling the add task component but we're not creating that until later but we will just add an event now just to kind of just to have it and just log to the console so inside of of button.view let's go ahead and add uh an event now when we did the smaller project i showed you we could do v dot on click and we could set this to a function i'll just say on click so that's one way to do it but another way instead of v dot on or v dash on instead of that directive you can just do at so we can say at click that will do the same thing and then let's define our methods down here and we'll have an on click and this is going to be a method and for now let's just console.log here and we'll just say click just to show you that that works so if i click that we should see that log now i'm going to put this on hold for a little bit because we don't have the component to toggle the add task what i want to do now is just get some tasks listed out here all right now as far as data as far as where we're going to put our data usually it's going to come from some kind of api some kind of back end and later on we're actually going to implement something called json server which is like a fake rest api a fake back end that we can use and we can make requests to for now we're just going to kind of put the data in the app.view file we are going to have a tasks component but we don't want to put the data in there because we want to access the tasks from other components as well and since we're not using something like view x for state management we want our state to be in the top level component here which is app.view okay so let's go down into the javascript here and let's add data remember data is going to be a function that returns an object and we're going to have tasks now i could put the tasks in here however i don't want to do that i actually want to use what's called a life cycle method and if you're familiar with react this you're probably familiar with these basically when a component is loaded it goes through a specific life cycle where there's certain methods or functions that are fired off that you can actually hook into and you can do specific things at specific times so the hook or the the life cycle method that i want to use is created so this is where this is commonly where you'll make http requests if you're if you want to load some data when you're when your page or your component loads you would put it in the created lifecycle method so let's go right under data we'll put a comma here and let's say created and this is going to be a method and in here we can have we have access to this dot tasks so we defined tasks here but we just defined it as an empty array so when created runs that's where we're actually going to fill this typically we would make a request but for now we're just going to hard code them right in here all right so you can see i have three tasks they each have an id a text value a day and a reminder okay so this is like if you want to set a reminder it's a true or false value so now that data is going to come in and what we want to do now is have a task component to pass this data into so we can render it on the page so let's go into components let's create a file called tasks.view and we'll add our template so basically all i want to do here is to to take in a prop of task take in the array and then loop through them and then output a single task component for each one so what we'll do here is let's see let's actually go let's add our script down here first because we want to take in the task array as a prop so we'll say export defaults and we'll say name tasks and then we're going to have props and we're going to take in tasks which is going to be an array all right and if we go back to our app.view let's bring that tasks in and then we want to register it here tasks and then all we have to do is go up here we'll go under the header and say tasks now since we're passing in an array here which is going to be dynamic it's it's basically if it changes we want it to you know get sent down into tasks so we're going to v bind tasks to the tasks data okay so we'll save that we'll go back here now we want to basically loop through those tasks and we can do that by creating a div and inside here we're going to have a v-4 directive and that's basically how we can create a list or we can loop through and output something so in this v-4 let's say for each task in tasks then we want to output something in this case let's just do an h3 for now and we'll have access to each individual task and of course the you know the data that comes along with it we'll just put the text for now now if i save that it's going to work we're going to see all of our text our task text in h3s we do have this error here or the warning it tells us that elements in an iteration expect to have a v bind key directive so just like with react when you create a list you have to have a unique key we have to do the same thing here so you have to v bind a key and it has to be unique so let's go ahead and just use the task dot id for that and that warning should go away now instead of just outputting an h3 here i want it to be a specific task component so let's create another component called task.view and this is what i mean about breaking your you know your ui up into specific components so we'll have our template and then we'll have our script and let's go ahead and export all right now as far as props this is going to take in an individual task so for props let's say task and that's going to be an object so we'll define that as an object and for now let's just put an h3 here and we should have access to that specific task and we'll we'll do the same thing task text so let's save this let's go back into our tasks and let's import task from and just dot slash task and we want to register it as a component so components task and then up here instead of the h3 directly we're going to do task and then pass in let's say colon task and pass that data in which is going to be the individual object you can see it's rendering the same thing because i still have the h3 here now i'm going to actually add let's do a class of task here and let's move this h3 in here and then we'll have a paragraph with the task day okay so save that that doesn't look too good i need to add a little bit of styling here so i'm just going to copy this real quick and let's add style down here and let's paste this in and save all right now i have a class of task although what we could do is scope this and you don't even need to add a class here you could just add instead of this you could just have a div because there's only one div in this component and this styling is scoped however i would rather just have the class and then we have this reminder class with the border so basically what i want to do is have it so if if the set if the reminder is set to true i want to have a green border on the side and then we just have the h3 styling okay so let's see what do we want to do next let's um let's add the delete button so i do want to use font awesome and just add a delete icon here so i'm going to go to cdnjs.com and just search for font awesome and let's copy the link tag and if you have any cdn that you want to include you can just simply put it right in the public index html file so we're just going to put that let's paste it in right there and then we should be able to use font awesome okay so in our task let's see we're going to put this within the h3 so we'll have an i tag with fas and the icon class is f a dash times so if we save that you see we have our icon i do want to make it red so i'm just going to go down here and say font awesome class let's go ahead and make color red now before we get to the event and we we click this and and delete from our data i want to just add the the border if it if the reminder is set to true so we have the entire task object coming into this component so we have access to text dot reminder so where we have our class up here because this is where i want to add the reminder class i'm actually going to change this into a v bind and let's we'll get rid of this for a second and we're going to put in some brackets and inside these brackets we can have a ternary so let's do task dot reminder which is either going to be true or false or saying if that is true then let's add a class here called reminder else then just nothing now we still want the task class to be to always be here it's not you know that's not a condition so we can add in we can just put a comma here and then we can say we also want the task class so now if i save that you can see the first two have the green bar the last one doesn't because if we look at our data the first two are true the last one is false if i were to change this to false that's going to get rid of that green bar here all right and we're gonna have a toggle function so that when we double click these we can we can toggle that reminder so the next thing that i want to do is i want to be able to click on these icons these buttons here and delete a task and the issue we have is these buttons are in the task component which is basically two levels deep right we have our main app component then we have our tasks and then in there we have our task and that's where the button is the data is in our main app component okay this is basically our app level state so you could use something like vue x but in an application this small it's really not needed we can basically just have actions or have events that that emit up so we can have functions in our main app file where we can manipulate this data so let me show you what i mean if we go to task dot view and let's add an event on let's see so we're going to want to click this icon here so we'll say add click and then we're going to set that there's just a couple ways to do this i'm going to show you kind of the longer way first which is just to create a method here on delete we do need the id so we can pass in the task id like that and then we can go down here we can define methods and we could say on delete and that's going to take in the id and just to make sure that that works let's console log the id go ahead and open this up and now if i click on here you can see it's going to log it's going to log the id now like i said we need to basically emit upwards into the app.view so we can do that by saying this dot and then money sign emit and we're basically emitting like a custom event here so we can call this whatever we want i'm going to call it delete dash task using the hyphen is kind of the the convention and then we also want to pass the task id along as a param so we can just pass that in like that now the next level up is tasks right if we if i click this right now wait what's this oh we don't want to pass task id we want to pass id because that's what's getting passed in here all right but this isn't going to do anything yet because we need to essentially catch this emit at the next level up which is you know inside of our task file so here let's say v dash on and actually we'll just do an add symbol here so let's say at delete dash task so when that happens what do we want to do now the data is not here either right so it's it's up another level in app so we want to essentially do the same thing we did here and emit an event with the id now we could create a separate method like we just did or we can just say up here money sign emit and then pass in oops pass in say delete dash task and pass here the task dot id and that's going to emit up one level so here where we have our tasks we're going to do the same thing we're going to say at delete dash task and then we want to set that to a specific method so we're going to call it delete task like that okay and then let's go down here we can create that method now we have access to this data right so we'll go right above created and say methods and let's say delete task and that's going to take in id and for now let's just go ahead and console.log here i'll just console.log task and then id so we know it's coming from here all right now if you see this this warning here this non-emits event listeners that's because in tasks since we're passing it up the way we are we need to actually define emits and that's just an array of events we're emitting so let's say delete task like that that should get rid of that warning yeah all right so now if i click on one of these you see i get task one task two task three so we're clicking on the button or the icon inside of the task.view file or the component and then it's firing this method off now we have direct access to this data so we can you know manipulate it how we want in this case we want to delete a task so let's get rid of this and let's set this dot tasks and you don't want to like you don't want to directly filter these or directly you know push onto it or anything like that you want to basically just reset it to something else so we're going to reset it to this dot tasks dot filter because we're deleting here so filter is a high order array method let me just close that up and this takes in a function and it's going to basically loop through and we'll say for each task what do we want to filter so we'll say for each task we want to take the task dot id and where that's not equal to the id that's passed in right here that's what we want to that's what we want back we basically want everything back except the task with that id because we're deleting that task right so let's save that and let's go ahead and just for this meeting at school i'll click that you'll see it goes away goes away and we could even add a confirm here since it's a delete so we can say like if confirm and just say are you sure and we'll just move this up into here just to give us a little warning for deleting all right now if i reload obviously this is going to come back because we're not persisting it we don't have any back end api that we're working with we are going to be using something called json server in a little bit once we get the whole ui part of it done but for now it's just going to come right back when we reload so the next thing i want to do is the toggle i want to toggle the reminder and that's going to be pretty much the same way we just did the delete we're going to go into task.view and let's see so i want this to be a double click on the div instead right here we did a click on the icon but here i'm going to add let's say at dbl click and we want to set that instead of creating a whole method like i did and then emitting down here i'm going to do it the short away and just say emit and here we want to emit we'll say toggle reminder and we can pass task.id and you know what let's actually do the same here instead of using the method down here this on delete we'll just emit and then here we'll say delete task and then we can just get rid of this and that should still work for the delete good so for the reminder let's see we're double clicking that's going to emit toggle reminders so we need to go oops we need to go one level up into tasks dot view and we're going to add on to our task component here let's add at what do we call a toggle dash reminder and when that happens we're going to emit again so we're going to emit toggle dash reminder and we're going to pass task task.id and we just want to add toggle reminder to emits all right so that's going to emit upwards and then this tasks right here say toggle dash reminder and we're going to set that to a method called toggle reminder and then we can create that method down here all right and that's going to take in id and let's just make sure that that's being called we'll just console.log the id real quick okay and then we'll open that up and if i double click we get the id good so we know that this is being called now to toggle the reminder excuse me there's a few ways you can do this we're going to use map so let's take they'll say this dot tasks and set this and because essentially we're updating this right we're updating a task by changing the reminder from either true to false or false to true so let's say equals this dot task so the entire array we want to map through map allows us to basically you know manipulate the array and return an array of of whatever we want really and we want to return an array of updated tasks so in this map let's put a arrow function and we're going to say for each task let's do a conditional here we want to check to see if the task dot id is equal to the id that's passed in if it is what we want to return is an array of objects where we have the initial task properties so we can spread across the initial task and then we want to change the reminder to whatever the opposite of the current task reminder so if it's true it'll get set to false if it's false it'll get set to true else if it doesn't match the id we just we don't want to do anything we're just going to return the initial task right so we'll save that and now if i double click the second one you'll see it removes it double click it again so it's just changing that one value all right so we can now toggle reminder so we have that done i think the next thing i want to do is the add task so we need to create that component with the form so let's go ahead and do that i'm just going to close that up for now can actually close all these except for app and then in our components folder let's create add task.view and put our template in here so this is going to be a form i'm actually going to um i'm going to just copy the basic form real quick so i don't have to type all this out let's see if i can find it all right here it is so i'm just going to grab the form and there's nothing view related in this form if you want to copy it if you want to type it out or you want to get the repo code you can do that just a form with the class of ad form we have some form controls that wrap a label with an input then we have a day and time so we have text day and time and then we have a set reminder which is a check box so i'm just going to save that and actually let's add our script down here and let's say export all right so i just want to display this form before we do anything so in our app.view let's go ahead and bring this in we'll just copy that down and set that to add task and let's see we want to add that here add task and then let's go up to the top and we're going to put this right between the header and tasks oops why'd i put a space there all right now the form looks like crap so i do have some some basic styling that i want to add so let me grab that again you can grab this from the repo so in add task let's add our style and we'll add scoped paste that in okay so that looks a lot better basically we just have you know our add form add some margin we have form control our labels inputs check box and so on now as far as the data goes here when you have a form you're usually going to have data for each field right so here we have a text field we have a day field right so we have text we have day and we have reminder so we're going to want to add that as data so down in our javascript here let's say data which is a function and it's going to return an object and let's add the text and you want to put whatever the default for the form here which in this case is going to be nothing for text and then we have day which is going to be nothing and then we have reminder which is going to be false now we want to bind these values to these inputs and we can do that with a directive called v model so let's go up top here into let's go to the first input and let's say v dash model and we're going to set that to the text field or the text data then we're going to go to this one here let's say v dash model and we're going to set that to day and down here for the reminder v dash model set that to reminder all right so now we have a binding between these inputs and the data so if i were to add a default value here like test and i save you'll see tests will show up here not only that but if let's say this the text data i want to output here like this you'll see that it says test and if i change this we have a two-way binding going on here so whatever i type in here it's going to output here where i have my text output okay i don't want to do that but i just wanted to show you that we can do that so let's um let's just get rid of this okay now we want to handle the submit so obviously on the form we can add submit and for that we're going to want to um basically we're going to call a method here and then we're going to do a couple things we want to construct a new task and then we're going to emit upwards into app.view so that we can add a new task to our data so here let's just call this on submit and let's go down here so we have our data let's go right here say methods and on submit and we're going to pass in our event object here and just prevent the default from happening so prevent default so it doesn't actually submit and then let's do just some very simple validation so we'll just do an if statement here we'll say if not this dot text because remember we can access that data with this keyword so if that's not there then let's just do an alert and say please add a task and then we'll just return okay and then if that passes let's construct the new task so we'll say const new task set that to an object now we want to have an id and since we're not dealing with any kind of back end yet we're just going to do something very simple here and just round down so math.floor and then call math.random and we'll do a hundred thousand so times 100 000. so that'll give us a random number this isn't something you'd want to do in an actual app because you're going to get repeating ids but this is fine for this so we have an id the text we're going to set to this dot text which is going to be whatever is in the form all right then we have the day so we want the day this dot day and then we have the reminder so reminder will be this dot reminder we also want to clear the form so let's say this dot text equals nothing do the same with day and then reminder is going to be false okay and before we do anything let's just console log here the new task okay so we'll go over here open up our console and just type something in here and you can see we have an id we have a day a text and a reminder so now we just want to emit that upwards so instead of console logging let's say this dot emit and let's call this we'll just call this add dash task and send the new task all right so now in our app file here we can go and say on add dash task we want to call a function or a method called add task so now down here we can you know do what we've been doing with the delete and the reminder i'm actually going to put the ad above this say add task and pass that in here all right so in order to add a task this is going to be pretty easy we can just say this dot task set it to an array where i'm going to spread across the current tasks and then just add a new one onto it okay and that task actually comes in here okay this is coming from here this new task all right so that i'm sorry this should be this dot tasks all right so let's save that let's try it out so if i just say test one test one we'll set the reminder to true save and there we go gets added let's do test two test two save and we can of course toggle we can delete these good all right so we can close up the add task and now what i want to do is make it so that when we click this add task it toggles this form right here toggles the component so inside of our app.view where we have our data right under our task let's create let's say show add task and this is going to be a boolean value which is going to be false by default and i just want to show this this component based on this true or false so up here we're embedding the add task we're going to create a div and let's move that add task into that div and we can use a conditional directive here there's actually a couple we can use we can do v if so if we do v if show add task and i save you'll see that that goes away another one we can use is v show so it's just basically you know if you could show something based on a true or false value you'll see it's still gone if i go down here and i change this to true then it's going to show now i want it false by default but i want to be able to click this button and toggle it so in order to do that let's let's go ahead and go into we're actually going to open up header and button now the initial event comes from the button right remember we have this on click right now it's just console logging we don't want to do that let's get rid of that we want to do this dot emit and let's call this show dash add or show dash add dash no let's call it let's call it toggle toggle add task all right now this is in the button component so that's embedded in the header so we have to basically catch that here and say at toggle dash show what i call it toggle add task all right so toggle add task and when that fires off we're going to want to then emit and we're going to once again emit toggle dash add task okay now in the uh let's see so header yeah toggle that so now the header here in the app.view we're going to do the same thing and say toggle dash add dash task and when that fires off we're going to call toggle add task and let's create that down here so toggle add task that's going to be a function and all we're going to do here is set that property that show add task to whatever it's not so the opposite of this dot show add task okay so let's go ahead and try it we'll click and there we go so just to kind of recap we click the button right the click event is right here calls this on click method down here we're emitting toggle add task which then we're catching right here where we embed it we're emitting it again from header and then up here in header we're setting it to fire this method off right here which fires off here and it just toggles it if it's true it's it'll set to false if it's false it'll set to true now another thing i'd like to do is change the look of the button i'll change the text if this is open i want it to say close and i want it to be red so the button is in the header right so we have to pass in here actually let's go we'll go right here no we'll just we'll do it at the end so we're going to use uh v bind and then pass in show add task which is going to be equal to whatever show ad task is i mean you might want to call this something different but it's fine it's just going to pass in whatever that true or false value is and it's going to pass it in as this prop so now if we go to header we need to define that prop so show add task and that's going to be a boolean so now let's go up to the top here where we're embedding the button and right now we're just passing in this static add task but we can go ahead and change this to a v bind by adding a colon in front of it and instead of just add task let's put a condition here so we'll say if show add task which is the prop being passed in the true or false if that's true then let's make the text we'll have the text say close right because if it's shown we want it to say close else then we want it to say not show add task right so let's save that yeah so now it says close if i hit it now we get add task now we can do the same thing with the color so let's make that a v bind and instead of just green we'll say if show add task then let's have it so if it's shown we want it to be red else then we want it to be green yeah all right now one thing i realize is in button um so button is i want this to be reusable so the on click here i don't want the emit to be toggle add tasks because if you if you wanted to emit something different you you're not going to want this so let's actually just call this button click we'll just say button click like that and then in the header instead of uh excuse me instead of catching this we'll call this btn click and that should still work yeah because because this is this is generic you know we want to be able to reuse this if we want so i think button click makes more sense all right so that's pretty much it as far as the ui goes i do want to implement something called json server to give us a fake back end to work with so you can see what it's like to to make requests and you know because in a real application you're probably going to have some source of data some api you're working with but before we do that i just want to show you how to build your static assets for deployment so i'm just going to actually close close everything up for now and in the console here let's cut this off with control c and we can run npm run build and you'll see it's building for production and it should create a folder called dist you can see just showed up right here and this is what you would actually deploy okay if you're building a single page app and the way we're building it you you're not going to deploy this stuff to your host it's just this dist folder and you could use something like netlify or pretty much anything since it's just a front-end application and we can test it out by using serve that's what i like to use to kind of test this locally so you can npm or if you're on mac sudo npm install excuse me dash g for global and then serve and this will just we're just going to serve the dist folder okay so it's not we're not going to do anything with any of these other files or other folders let's go ahead and just run serve say serve dash s and let's serve the dist folder so you can see it's running on localhost 5000 so if i were to open up http host port 5000 there it is now 8080 if i go back over here that's the dev server that's that's off that's not running anymore these are our files that are in the disk folder and we should be able to add tasks should be able to delete them toggle them toggle this so you can see that it's working so this is how it would work if you were to deploy it to you know to a production server so i just wanted to to do that real quick now before i start the dev server back up i'm going to install something called json server so let's say npm install json dash server and just to show you what this is let's say jason dash server and go ahead and just make this a little bigger so it's a full fake rest api and we don't have to code anything basically we just have a json file that we can create let me see what it shows here yeah so we create a db.json file and we can put any data we want in our case it's going to be tasks but it could be anything and you can run the server like this json server watch your file and it'll start on a specific port and you can make not only get requests to get the data but you can also post to update put to to i'm sorry post to create put to update patch to update and delete to delete all right so it's really cool you can also do filtering and pagination it's a it's one of my favorite tools to work with so let's go ahead and now start our server back up so npm run actually before we do that let's not do that just yet in our package.json let's create a script to run json server um so let's see we have npm serve let's do we'll just call this server might be a little confusing because we have serve and server so let's do we'll do jace uh yeah we'll do json i guess so npm run json and what we want that to do is to run json server so json-server dash dash watch and we want to watch a file called db.json which we'll create in a minute and i just want to run that on port 5000 so i'm going to add the flag dash dash port set that to 5000 okay so basically that will run our back end well we can call this back end okay now the the json file let's create that that's going to be in the root called db.json and let me just grab the data for this it's just going to be the same you know same stuff we've been working with tasks id and what's great about this json server is when you if you create a new item a new task it'll actually add the id for you so let's save this file and now we should be able to run npm run back end and it'll run our rest api or server so let's say npm run backend okay localhost 5000 and we can even go you know we can go over here say localhost 5000 now it's going to be let's see that's not going to give us anything we want to go to slash i think we just go to slash tasks yeah so there we go so it's serving this data and like i said it's not just get requests we could make a post request to to add and update and all that too so our backend is running let's open up a new tab here and let's run npm run serve which is our our view dev server so i'm just going to reload this good so now that we have a back end let's go to our source app.view and let's see basically we're just going to kind of change this stuff up so that we're not only dealing with the ui but we're also dealing with you know our back end so initially we just have our tasks just hard coded right here we have our created lifecycle we're setting this.task to a hard-coded array so i don't want to do that i want to fetch from the backend so in our methods right under toggle reminder i'm going to say fetch tasks and we're going to make this async because we're using a sync await with fetch so let's say const response set that to a weight on the fetch api we want to fetch from http localhost port 5000 slash tasks you saw the data that that gave us in the browser and then let's say const data set that to a weight res res.json and then we just want to return the data and instead of this here like hard-coding this array let's replace the array so we're going to replace that with this dot fetch tasks okay actually this is going to return a promise so we have to wait and we can make this a sync so we'll save now it's not going to look any different but if we were to look in the network tab here and reload actually you can't really see it here but let me just stretch this out a little so let's see let's actually reload that so tasks bring this up a little bit so tasks and you can see right here we're getting this back from the server we made a get request to 5000 tasks 200 response and that's our response and i could change the data directly in the db.json if i wanted to like instead of meeting at school we could say meeting with boss and if i save that and we refetch you'll see meeting with boss so the next thing that i want to do let's see we've done we've fetched the data let's also create a function just to fetch a specific task because we're going to need that in order to update later on so we can actually just copy this paste that in change it to fetch task which takes in an id and let's trade this trade these single quotes for backticks so that we can say task slash and then put in the id and we'll just return the data so that will just fetch a single task now i think that we should look into using a proxy because typing this you know localhost 5000 out we're not going to want to do that when we go into production it's just going to be like something like api slash tasks right so let's actually change this to both of these to api slash task now if i save this it's not going to work because that's that doesn't mean anything with vue.js though we can add a proxy with a config file so if we go in the root here and create a new file called view dot config.js and here we can module dot exports and then we can add this dev server and inside here we can add a proxy and you can set all kinds of rules but basically what i want to do is is set it so if we hit slash api slash anything then we're hitting localhost 5000 slash anything so i'm actually going to just copy these rules real quick and paste these in alright so essentially we'll be able to just do what i have here api slash tasks and that's going to hit localhost 5000 slash tasks okay when we only when we run the dev server not in production so let's save that and i think we have to restart the server for that to work let's yeah probably so let's um this is the view dev server i'm just going to cut that off and restart that and let's reload and there we go so now we no longer have to do that you know localhost 5000 we could just do api slash whatever so now let's go ahead and do the add task because right now we just add them to the ui like if i add something here it gets added to the ui but i reload and it's gone it's not being persisted so right here we have add tasks let's make this a synchronous and we're going to keep keep this here but above it we want to make our request so response set that to await fetch and we want to fetch we're gonna this is gonna be api slash tasks but it needs to be a post request not a get request so we need to pass in a second options parameter or argument and let's set method to post and since we're sending data we want to do headers and we want to set the content dash type we want to set that to or application slash jason and then the body is the data that we're sending and we want to just wrap that in json.stringify okay and the the data we're sending is the task that's coming in here okay now for the response let's say const data and set that to await the response.json that'll give us the task back the new task which then we can just add down here so we're just setting this.task to whatever is already there plus the new one that was just added so let's save that in let's say add task let's say go to [Music] i don't know go to dentist on march 10th at 3 00 p.m so that didn't work uh let's see what got so it added the id it just didn't get the data hmm so jason.stringer5 oh i put the body in the headers dum-dum all right let's put that here and let's just delete this okay so this should work now dentist appointment march march 10th at 3 p.m set reminder and save all right so it made the request and you can see it got actually got added it added an id and if i reload it should still be there good now one thing that we don't have to do now is put an id ourselves because if you remember in the let's see components add task remember we added this id we don't want to do that anymore because the id gets added by json server so we can get rid of that actually you know what i'll just uh we'll just comment that out all right so now let's do the delete so because i can delete from the ui right but if i reload it's still there because we didn't persist the delete so down where we have our delete let's make that a synchronous and let's see we'll just go yeah we'll go in here and let's make our request i'm going to set that to a weight fetch and then we're going to fetch let's see it's going to be api tasks slash and then we want the id so let's actually change these to backticks and pass in the id and this needs to be a delete request so we're going to add the method of delete all right and then what we're going to do is check the status because we want to make sure it's deleted off the server so we'll say we'll put a ternary here and say if res dot status sorry is equal to 200 then let's filter it right so we're gonna do i'm just gonna grab this we're gonna cut that and inside parentheses here we'll paste that in so we'll filter it we'll delete it else if it's not 200 and there's some kind of error we'll just go ahead and alert and say error deleting task okay now this filter right here uh i just want to check this real quick so this dot task equals this dot task filter we want to match task id yeah so that should be fine so let's try that out we'll save and if i delete dentist appointment it gets deleted from the ui if i reload it's gone and your json server console should show you all the all of the um you know requests that you're making or that you're taking in so here's our get here's our posts our delete every time i reload it's going to make a get request all right now let's see what do we have left to do so we want to do the toggle because right now i can toggle the reminder but it's not going to stick right we need to actually make an update so let's go down to our toggle reminder make that a sync and let's do so we're gonna have to do a couple of things here one i'm gonna just set a variable called task to toggle because we want to fetch that specific task remember i created that fetchtask method i'm going to await this dot fetch task and we're going to pass in let's close this up we're going to pass in the id that's passed into toggle reminder so that'll get the the actual task we want to toggle now let's create a variable here called update or upd task and set that to an object and we want to spread across the task to toggle so basically what we get back and then we want to change the reminder to whatever the opposite of that is so the opposite of task to toggle dot reminder now all this does is put it puts this in a variable we haven't made the request yet so now let's do that so const res and set that to a weight fetch and we want to pass in here some backticks api slash tasks slash and then the id and this is going to be a put request so let's pass in here our method which is going to be put because put is for updates and then headers and we want to add content dash type of application slash jason and then for the body make sure we don't do it in the headers so the body is going to be say json.stringify and we want to pass in here the updated task all right so then we'll get the response back which will be the updated task and then the only thing we want to change down here is instead of setting the reminder to the opposite of of task reminder we want to set it to whatever the data coming back which is the you know the updated task we want to set it to the reminder value of that so let's save and food shopping i'll double click okay so it looks like that's not working um let's see oh i didn't it's been a long video we need to get the data back so await res.json there we go food shopping let's toggle if i reload it's gone toggle it again reload it's still there all right good so we basically have a crud application we can't update the title and the day i mean you can implement that if you want but this should give you a pretty good idea of how to how to do that and how to work with a back end all right now the last thing i want to do is show you how to implement the view router now like i said earlier when you're using the cli you definitely want to choose the router option if you plan on using the router rather than doing it this way but i didn't want to i basically just wanted to show you how to do all this stuff first and then deal with routing so we're just manually setting the router up but again the cli gives you the option to just basically set this up by default so i want to go to my view you know my front end my vue.js terminal here and just cut this off for a second and then npm install and at this point we're going to install router or view dash router at next which will give us the latest version of the router so at this point in time if you're using view version 3 you need to make sure you add this at next so let's install that okay then we'll run our serve npm run serve again okay so now there's there's a bunch of things that we have to do uh basically i just want to have a home page which is going to be what you're looking at now with these multiple components and then also an about page it just shows like the version of the app and we'll have a we'll have a footer with a link so let's first before we even get into the router let's create a new component called footer.view and i mean this is going to be pretty simple we're just going to create a template and in here let's see let's use a footer tag and we'll put a paragraph here we'll say copyright copyright 2021 and then i just want to have a link to the about page so for now i'm going to use an a tag this isn't what we should do but just for now i'm going to use this and this is going to go to slash about and we'll just say about and then let's add a little bit of styling here so we'll say style scoped and let's change the color of the link to three three three and then for the footer let's just do a margin top 30 pixels and a text align oops text a line center okay and then we'll bring that into our app dot view so let's see i'm just gonna go i'm gonna copy the header down and put in the footer and then we're going to embed that up here at the bottom so footer uh we need to register it that's right so components say footer and there we go so we have a simple footer now if i click on about it it doesn't do anything i mean it goes to that url but it's the same we're looking at the same thing right so to implement the router there's a few things we need to do first we need to create in our source folder we need to create a new folder called router and the cli again will do this for you if you choose that option inside here we're going to have an index.js okay so we have router and then inside we have index.js and we want to import from the view router we're going to import create router and there's a few different ways to do this we can use like the hash router we're going to use the standard html5 push state and that's with create web history so we want to bring that in as well and then any i should say views that we want to bring in a view not vue but view is basically a page so it's a view component but as a page so we're gonna have an about component but it's gonna be a view so it's gonna go in a separate folder right so i'm gonna go uh in source and let's create a folder called views and inside views let's create a file called about.view vue and we'll just have a template and just for right now we'll just say h1 about like that now i want this to be a spec a specific route like if i go to slash about this is the component or the view that i want to show so i need to import that into this file so import about from and it's going to be up one level in views and then about okay now we want to create an array of routes so we'll set this to an array and each route is going to be an object with a path so this i want to be slash about and then we'll give this a name of about and then the component that we want to render which is about which i just brought in so every route every page or i should say view everything that's in this folder you want to bring in here and then add to your router okay now down here we want to define our router with the create router function that we brought in which takes in an object with a history property which we're going to pass in create web history and this takes in the base url which we can do process dot env dot base underscore url and then it also takes in our routes array okay and then we just need to export default router so this is our route file now in order to use the router we actually have to go to our main.js the entry point and import that router file that we just created so it's going to be from dot slash router and then we just want to use it by saying create app and then just pass in a dot use here like that and pass in our router and that will use the router now if i click on this about it goes to slash about but we don't see anything here that's because in our app dot view we have to show the router view somewhere so i mean ultimately i just i want the header and the footer on every page these two components i'm going to want on just the home page but for now we're just going to leave them and put in router dash view yeah we should be able to do that and now if i save you'll see we have about now if i go to the home page we don't see that it's only on that route now we're seeing the rest of this stuff because it's just it's it's still embedded here right it's not set to a specific page a specific route um so we're going to want to do that uh but before we do you see how when i go to the about page it kind of it refreshes the page see right here if you watch the favicon we don't want that to happen and the reason that's happening is because in the footer when we link to that about we're using an href and we don't want to do that what we want to use is router link instead so we're going to change the a tag to a router dash link tag and change href to 2 like that so that way if we click on about let's go back we click on about you'll see it's just it's just automatic right there's no reloading or anything like that so you want to make sure you use router link now on the about page let's um let's just put like we already have the title and the header so we'll just put an h3 and let's say version 1.0.0 and then let's have a router link to go back so we'll have two and that's gonna go to slash and we'll say go back like that okay so now we can go back and forth okay so what we need to do now we can close up about in footer we want to create a new route so that we can see the add task component and the tasks on the home page right or the home route so in the index.js of our routes let's uh we'll just copy that so the path for this is going to be just slash the name is going to be home and the component is going to be home and we haven't created that yet but i'm going to bring it in so home home and we're going to get an error because that doesn't exist yet so in views not in components but in the views folder we'll create home dot view and we're basically going to take a bunch of stuff from just the app.view and put it into the home so let's create a template here and let's go to our app.view and we want to grab let's see we want to grab this so the add task with the conditional and the tasks and we're going to cut that out and we're going to put that in here okay in the home then for let's see script so for the script we're going to want to uh of course we need to bring in add tasks and tasks so we can just grab that close that up we'll just grab those here so these two imports we're going to cut those and put those into here and this is why i would i'd say you know do this from the beginning with the cli because it would already create this home page for you and you could work with it instead of having to move stuff around like this but again i wanted to do this last now here we want to export defaults and let's say name home and then components so components we want task and add task and then we can get rid of that here task and add task so basically the only components you want in your app.view are ones you want on every page such as the header and footer now we also want our tasks data that's also going to be in in the home page so we can get rid of that and let's put that here so we want data and tasks initialize that with an empty array um we're going to want all of this other stuff as well i mean the only thing the only thing we really want on the in the app.view as far as methods is going to be the uh the toggle add task so everything else all these other methods from add tasks down to even the created actually no let's just copy the entire methods in and created so from here i know this is a little confusing i hate doing this kind of stuff in a tutorial i'm going to grab the methods in created copy them and then put them here in home okay but we don't need in home this here toggle add task we're going to get rid of that okay and then here we can get rid of everything let's see we'll get rid of the created and then in the methods we're going to get rid of everything except the first one which is toggle add task and get rid of all the other methods all right so this this app.view is you know cleaning up so i'm going to save that and everything's going to disappear for now but let's go back to home and save that and let's see what am i missing here so this should load when we go to the home page resolve add tasks okay so the path has changed so before we were in the components folder now we're in the views folder because we're in this this home dot view so we just have to go up one level for these and let's see what else are we missing here reference error task is not defined task is not defined home dot view components to oh wait a minute why do i have task that should be tasks the data option must be a function did i actually put data as an object i did so right here i made this stupid mistake so let's set that and then we want to return an object and set tasks to an empty array all right so we're getting there so we can we're able to see this stuff now this isn't going to work just yet and i'll show you why in a second but we should see our task here we can toggle now show add task was accessed during render but is not defined on the instance so if we go to app.view we have show add task see we're passing that into the header now we need that show ad task we need that to get passed into our home our home page right because we're using that where are we using that right here we're using that to show the add task form now we can actually pass in to router view we can pass in props so let's go ahead and say show add task and we're going to set that to actually we need to bind it so like that and then show add task right so we can pass that in and then we can catch that as a prop in our home so let's add this here say props and for let's say show add task that's going to be a boolean save that and there we go all right so i i mean that that actually took me a while to figure out when i was when i was first dealing with this how to basically pass a value from our main app file into you know a view because it's not it's not just a regular component but you can pass props in to the actual router view okay and we could catch it in any of our pages or any of our view components so i hope that makes sense now i just want to just test everything out so we'll try to add a task let's say test test okay so that gets added i reload it's still there i can toggle it i can delete it still there i can go to the about page and now obviously on the about page we're not seeing our other components because in our app.view we just simply have our router view and we have the header and footer so any other components that you would want to show on every page you could just put right in here and we you notice we go back and forth very smoothly it's not doesn't reload or anything because we're using the view router now the last thing that i want to do is limit this button here to only the home page because if i go to about there's no sense in having this button here it's not going to show the the add task component so let's go to our header component so header dot view and we're going to use something called the computed property which is basically used for reactivity if you want to do something like let's say a simple example would be if you had a first name and a last name piece of data and and you wanted to combine them to make a full name you could do that within the computed property so we're going to say computed and here i'm going to have a function called we'll just call this home page and then we want to do an if statement now we have access to this dot money sign route and we can get the path i didn't mention this we also have access to this dot router and we could let's say we wanted to redirect programmatically we could do push there's other methods as well but we just want to get the path here so it's this dot money sign route dot path so we'll say if that is equal to just slash meaning it's on the home page then let's go ahead and return true and then we'll say else will return false and then that way we can go up here and when we have our button we can use a conditional so right in here we can just say v dash show and we can set that to home page so go ahead and save that and now it's you know it's still on the home page if i go to about it's not there okay and if we create any other routes it's not going to be there it's only going to show on the home page which is what we want and then one more thing back a little while ago when we did this this conditional here for add task i wrapped it in v dash show we don't actually have to do that i used it like a v if we could actually just put it right in here and then get rid of the div around it which is a bit cleaner so if we do that it should work the same way you'll see it still toggles okay it's not on the about page and that's it alright so i know this video is kind of long but hopefully you learned you know at least the fundamentals of the ujs and you can start building things on your own so that's it guys thanks so much for watching i appreciate it and i'll see you next time

Channel: Traversy Media

Views: 432,676

Rating: 4.9635067 out of 5

Keywords: vue, vuejs, vue.js, vuejs tutorial, javascript, vuejs crash course, traversy media, vue 2021, vue3, vue js 3

Id: qZXt1Aom3Cs

Length: 110min 52sec (6652 seconds)

Published: Wed Feb 24 2021