Vue 3 Crash Course | Project From Scratch

all right what's going on everyone welcome to my view 3 crash course we're going to be covering the fundamentals of u3 by building a crud to do tracking application through this course you'll learn about setting up a View application using the official view build tool the structure of a View application and how view Works core review fundamentals such as reactive data special view directives reusable components view routing Basics and more by building a full crud to do application using view 3's composition API and then we'll be deploying this new application to netlify whether you're brand new to view or are just looking for a refresher by the end of this course you should be in a great place to start building your own view applications while we will cover a lot about viewing this crash course I won't be able to cover everything if you're looking to continue learning more about Vue and build some awesome projects I'm currently working on a new view course at the time of recording this crash course it isn't out yet but you can head over to my website and join the waiting it should be releasing around summer of 2023. if you do sign up I'll send you over a 50 discount code you can use when it releases also if you'd like to support me this view crash course is going to be available on udemy the content on udemy is mainly the same as a crash course here on YouTube but it comes with a few extra perks it's going to be ad-free it'll have quizzes and coding exercises throughout the course after lessons and also a few extra lectures that link will be down below in the description as well before we get started I want to cover a few prerequisites first you should have a solid understanding of HTML CSS and JavaScript before diving into any front-end framework if you don't I'd highly suggest coming back at this video at a later time once you have those fundamentals down for this crash course we're going to be using node to scaffold out a new view project using the official view build tool so you're going to want to make sure you have that installed if you don't pause the video here and head over to node.js and install that lastly you're going to need a text editor and for this course I'm going to be using vs code within vs code I'm going to be using some really handy extensions for view which I suggest you install as well and those extensions are Velar and view vs code Snippets alright before we dive into working with view I want to spend some time covering what view is and how it works vue.js is one of the three popular front-end JavaScript Frameworks used to create Dynamic and data-driven single page applications that are client-side rendered you also have other popular front-end Frameworks such as react and angular for the most part these Frameworks all do the same thing but each one has a slightly different way of doing it as I mentioned view is a spa which is short for a single page application how a single page application works is instead of requesting each page from the server as you'd see in a website without the use of a framework Spas handle everything on the client side the initial request to the website will reach out to the server and obtain and then send back the HTML for the website with this request we also get back the view JavaScript bundle which then takes full control over the website in the browser each time we request a new page the web website will use the view JavaScript bundle to produce that requested page instead of reaching out to the server and this is known as client-side rendering now you might be wondering well how does Vue know which page to display well view has an official Library called The View router and we'll be covering this more within the course but this is how all pages are going to be handled inside of a single page application using view simply what you do is configure each route or path to link to a component if the requested path a user request matches a route inside of your router configuration it'll then request and load in that component now a few downfalls to a single page application is that it has a higher first load performance which can negatively impact your search engine optimization however after the initial load it can heavily improve the user experience with a fast Performance website or application since view is a single page application what happens is the crawlers are going to have a hard time crawling and indexing your website which is where something like nux a server-side rendered framework for view can be utilized now in order for you to use Nooks you should really have a good understanding of how view Works since nux is actually built on top of you and I'll also be creating an updated crash course on nux3 here very soon now although view is a front-end framework it's very common to actually pair review or a front-end framework with back-end Technologies like node and express or even something like Firebase or Super Bass to create powerful full stack applications so you might be wondering why would you choose view over a traditional vanilla JavaScript application and there is a handful of reasons such as the ability to create Dynamic data-driven interactive apps and websites now view also has something called the virtual Dom and essentially the virtual Dom is a virtual lightweight copy of the actual Dom and when the virtual Dom gets updated in view it will then compare the two the virtual Dom and the actual Dom and only update what has changed instead of the actual entire Dom which is going to make updates to the Dom quicker and more efficient Vue also has special directives that simplify a lot of common things that we would do inside a vanilla JavaScript application when using view we also have the ability to create components which allow us to create reusable logic and also view is extremely lightweight so as I mentioned earlier view is not the only front-end JavaScript frameworkers also react in angular which are two other popular choices and you may be wondering well why would I choose view over these two other Frameworks and generally these Frameworks as I mentioned are all going to basically do the same thing but each one has a different way of doing it however I feel that view actually offers the easiest learning curve compared to the other two Frameworks and the reason being is view is very similar to traditional HTML CSS and JavaScript and to use it you really only need fundamental knowledge of HTML CSS and JavaScript making it easier to understand and comprehend especially if this is your first front-end framework view is also constantly growing view 3 was actually just released not too long ago which brought a lot of great changes to the framework it also has a great Community with many developers sharing their knowledge and there's also a lot of resources and live libraries that are easily integratable and view also has a handful of official libraries such as the view router for client-side routing and penia for State Management which can be added incrementally to your applications as needed the last thing I want to cover for this introduction to view is what a single file component is now View files operate on a single file component and again this is where I feel the learning curve is minimal a single file component is going to encapsulate the HTML CSS and JavaScript all into one single file for example here is what a common signal file component might look like for a navigation component at the top you're going to have your script which is where you're going to write all the JavaScript for a specific component within here you could create data which can be outputted to the template or even create functions to do something such as open and close a mobile navigation menu then you have your template which is going to be for the HTML and lastly you can add style tags to style up the component itself and that is what a single file component is and this is how we're going to be creating components throughout this crash course all right so over on GitHub I've went ahead and created a repository for this crash course I've made a branch for each section as well as a branch for the starting files and completed project so if you're having issues following along and want to check out the code for that particular section you'll be able to reference that here and each section in this video should correlate with the branch within this drop down with the basics out of the way let's begin a generator view project via the view build tool to do this I'll start by creating a new folder on my desktop and call this view to Do's I'm going to open up this folder with vs code now vs code has an integrated terminal and to open this you can either navigate to the top and select terminal and then new terminal or able to use the keybind control back tick within the terminal we're going to want to run the command npm init View at latest to generate a new view project remember for this to work you'll need to ensure you have node installed on your system considering this would be your first time using the tool It'll ask you to proceed by selecting the y key it'll then ask for the name which I'll call this view to Do's next we have the option to configure view for typescript which for this crash course we won't be doing however if you are interested in learning about view for typescript I will be creating a mini crash course on this very soon we won't need jsx support so I'll select no next we have the ability to add the view router which as I mentioned earlier is how view handles Pages we're going to be using this very minimally so we'll want to select yes then we have another view library for State Management called pinia this library is beyond this course but if you are interested in learning more about this I do have an introduction video already on my channel that you can watch and I'll leave a link Down Below in the description for unit testing end-to-end testing and also es lint I'm just going to be selecting no with this completed we now have the view to Do's folder created the last thing we'll want to do is install all the dependencies to do this we're going to want to CD into the view to Do's folder and run the command npm install once that finishes we'll now have our view project created now that we have our view project created let's take a look at how view works first what we're going to do is start the local development server the local development server is a way to view all the changes we make locally to the application in the browser in real time inside of our packets.json you'll see we have a few scripts to spin up the local development server we just want to run the devscript So within the integrated terminal let's run the command npm run Dev once that's completed you'll see we have the application running locally let's open this up within the browser now that we have this up and running let's take a look at how view Works under the hood if we expand the source folder we can see a file called main.js This is essentially the entry point for view in this file the create app function is being imported from view along with a single file component app and then the router then there's a variable of app that is being declared and it's set equal to the create app function and is being passed a single file component own of app as a parameter lastly on the app variable we have access to a function called Mount which allows you to mount the application to the Dom and it's being mounted to an element with an ID of app and this element exists within the index.html file within the root of The View files so what's happening is the app.view file is the main view component that everything gets routed through this component is being used to create The View application and then it gets mounted or injected into the div with an ID of app and this index.html file becomes a single page for the entire application if we take a look at the app.view file we can get a better understanding of how view Works within the template we have a few elements and those can be seen within the browser here now each element within this template is going to be included on every page that we have in the application for example within the header you'll see this navigation element with within here there is router link Elements which is how users are able to navigate to different routes within the View application the router link element accepts a tube prop to inform view which route to request so if we head over to the application and begin to switch Pages within the navigation you'll see that the content within the header tag of the app.view file remains on both Pages however the content beneath the header is different for each page and this is being controlled by this element here the router view as the name suggests this renders in the current view associated with the route the user has requested if the route for example is slash about then the router will see this and request and load in the component that is assigned to this path it will replace the router view element with all the content associated with that component which in this default application is just simply this H1 tag so in this app.view file you'll mainly be adding components that you want across every page in your View application such as a navigation or a footer now we're going to take a step back and look at the script portion of a view single file component every view component goes through a series of steps when it's created and the steps are referred to as lifecycle hooks now on the script tag there is an attribute called setup that you'll be seeing in all the view single file components within the starting template this is a syntactic sugar for using the composition API with view single file components and it's recommended that you use this attribute when using the composition API over just a traditional script tag prior to the syntactic sugar you had to declare what is called a setup function which is the first lifecycle hook in the view component creation process now the set of function is used to write your reactive State and JavaScript functions and to use these within the template you had to return the state and functions at the end of the setup function when using the setup attribute you no longer need to Define this all the code is within the script tag is now going to be compiled as the content of the component setup function so not only does this allow you to write less boilerplate inside of your components it also improves your application's performance so throughout this course we're going to be using the setup attribute within components now after the setup function is ran in the creation process there is still a series of additional lifecycle hooks that run and here's a great diagram from The View docs breaking down each step of the process so for example each time that we're changing Pages within the View application the component that is being rendered to the page is going through this lifecycle process through each step of the life cycle a function is going to run allowing you the opportunity to add your own code at specific stages now it's not all too important to fully understand what's happening within the life cycle of a component right now as we're just beginning to learn view but as you continue to explore and build with you this die diagram and the view docs can be a helpful reference now that we understand how view Works let's take a look at the structure of this default view project we are going to be removing a majority of this boilerplate template but the initial template is going to give you a good understanding of the basics of view if we expand the source folder we'll first see a folder called assets and this is where you're going to store all of your assets such as your images videos or even Global Styles as you can see here initially next we have a components folder which would be used to store all the reusable components if we open up the first component hello world.view we can see the single file component structure mentioned earlier at the top we have the script then the template and last of the style tag now within this script there's something called the find props what props allow you to do is pass data specifically JavaScript values from one component to another in this default application there is a message prop that is being defined and it has a type of string and is also required what this means is that the Val value of this prop must be a string and should always be passed to this component then this prop is being outputted to the template using what is called mustache syntax this is how you insert data into the template of a view single file component inside of the app.view file where this component is being used you're able to see this attribute of message defined on the Hello World component this is actually called a prop and you're able to control the valley directly from this component currently as you can see the prop is a string with the value of you did it so we can actually update this prop to something else and as you can see once we do that that change will be updated within the application again the main purpose of props is the ability to pass JavaScript data from one component to another making view components more Dynamic and will be seen more with props later within this crash course another component that we're going to be taking a look at is the welcome.view and welcome item.view within the welcome.view you'll notice that in the welcome item component that is being defined there are these two template tags within the components template that have the value of pound icon and pound heading on the template itself and these represent what are called name slots beneath these names us there is actually this additional content which represents the default slot if we take a look at the welcome item component we'll see the slot tags that have a name attribute that correlate with the values on the template tag in the welcome.view component and beneath these you'll just see a basic slot tag which is going to be for the default slot content so as we just seen props allow you to pass JavaScript values to components what slots allow you to do is pass in template content to a child component and as you're able to see in the welcome.view these slots allow us to pass in template content directly to the welcome item component and we'll be seeing a very basic use case of slots later than this crash course now I do want to mention that don't worry if this boilerplate does not make a lot of sense initially the purpose of going through all this is to introduce you to how view works and its features beneath the components folder we have the router folder with the router configuration if we open up this index.js file we can see the current routes that we have within the default application each route is being defined within this routes array and each object within this array is a route that links to a component slash View and speaking of use the next folder we have is for storing all the views of the application and within this folder we just have two default views of home and about so for each page that you want to have in your application you'll just want to create a view single file component here within this folder then we have the package.json which is for all the scripts and dependencies for our view project and lastly we have the vconfig and this is where you can set up configuration for V within the View application we won't be modifying this file for this crash course so you can just leave it as it is okay so to get started what we're going to be doing is some cleanup here within our view3 project now as I mentioned we're not going to be needing a lot of this boilerplate that we were given when we generated our view3 project so what we want to do is inside of the assets folder we're going to remove all these files so we'll just select all these three here and delete those we're not going to be needing those then inside of the components folder we're not going to be needing any of these components as well so we can select all these and we could delete those and as you can see here once you do that we are going to get an error because some of those components were being used in various spots within this project so we don't need to touch the rod we're going to leave that as is now within the views folder we want to come to the home View and we deleted this welcome component so we're going to want to remove it from this of you as well so we'll select it in the template and then also the script and then inside of the app.view file we want to remove the entire header tag here we're not going to be needing this but we will keep the router View will remove the hello world import as well as the router link because we're not going to be needing that here inside of this view or component and then for the Styles here we're just going to remove all these and we'll just create a new style tag all right and then the last thing we're going to need to do is inside of our main.js we no longer have this main.css file so we can remove this from this file as well and that should give us a clean template to begin working on our project now for this project we are going to be using a few dependencies so we will be using a package called uid and this will be for generating a unique ID for each one of our to Do's we'll also be using iconify for View for the icons and then we'll also be using SAS so here inside of our project what we want to do is open up the integrator terminal and then we'll just open up a new terminal Tab and then we want a CD into this view to Do's folder so let's say CD View to do's and then once we're inside of this folder what we want to do is say npm install hyphen hyphen save hyphen Dev to save these as a Dev dependency and then we just want to list these out so we'll say uid and then we'll also say SAS and I believe iconify for view was just at iconify view so we can paste it in here and hit enter and those should install those here into our project so once that's all done if we head into the package.json and we come down to our Dev dependencies we should see iconify SAS and also uid okay so what we're going to do is set up some Global slash based styles for our project and where we're going to do this is within the app.view file now if you had a relatively larger project than what I'd probably recommend you doing is actually creating a separate style sheet here inside of your assets folder and then importing that here within your main.js like we've seen within the boilerplate but since we're creating a relatively small application we can just store all of our Global Styles here inside of our app.view file so the first thing I want to do is actually on the style tag we want to update the language or so we'll add a lang attribute to the scss since we're going to be using SAS and what we're first going to do is we're going to head over to Google fonts and we're going to import this font family of Rubik so we're going to be using light regular medium and bold and we'll be using the import directive to import this font from Google so we'll copy this import directive and then we'll paste it here inside of this style tag now for the remaining styles that we're going to be adding here to our app.view file I'm just going to reference the GitHub repository to save some time so that way we can focus more on view and less on the actual style aspect of it so on the GitHub repository here there'll be a link Down Below in the description we just want to switch branches and this is section three so each section within this crash course should correlate with a branch here and we want to click on section three then we're going to view the code we'll go to the source directory and then we want to select the app.view and then we'll just copy these two simple Styles so we just have a reset and then a container class all right let's begin to create our first few component which is going to be the navigation for our application which is going to look something like this now I did add this image right here to my project as you can see right here inside of the assets folder so to download this what you want to do is head over to the GitHub repository and this is going to be section four so we can go to section 4 on the branch list we want to view the code go to the source directory and you should be able to find that here inside of the assets folder so to create our navigation component what we want to do is head over to our components folder and we want to create a new file and I'm going to call this to do header.view but feel free to call this whatever you want and then I'll hit enter here and then inside of this component what we want to do is use our extension of view vs code Snippets and we can type in v and say base and we want to select the option here of V base 3 setup Now by default what this is going to do is set up the template the script and the style tag with the Lang of CSS and the scoped attribute here and I'll talk more about what the scope attribute does in a little bit but one thing I do like to do and this is as a preference I'd like to have my script tag above my template but the order of this doesn't really matter it's just more of a preference but I'm going to be using it in this manner here we have the script then the template and then my style tag now before we begin to build out this component what I want to do is head over to the app.view and Define this globally since we want to have our navigation appear on every single page within our application so what we can do is above the router view we can say Open Bracket and we can do to do and we can see right here that our extension is actually seeing our component inside of the folder so we can actually click on this here and then it's going to automatically import that for us here inside of our script tag and then all we need to do is add a slash and then a closing bracket so now if we head back over to our to do header component and we for example just put a H1 in here we should be able to see this now within the application so let's remove this markup that we have within the template and begin to generate the markup we need for our to-do header components so I'll start off by creating a header tag and then within here we'll create a nav tag and we'll add a class on here of container now if you recall this class comes from the app.view file and the container class that we imported globally okay so inside of this nav tag we'll create a div and we'll give it a class of branding and within here we'll just have our image and what we're going to do is reference this image we have inside of our assets folder so we can do dot dot slash and we can go to our assets and then we want to use this view logo black okay and then beneath this we'll just have an H1 and this will say view to do's now beneath the Brandy we're going to create the actual navigation itself so that way users can switch between Pages within the View application so we'll create a ul and then this will have a class of nav Dash routes and within here in order for users to be able to switch Pages inside of The View application we need to use a component called router link so we can say router link here we can click Tab and usually that's going to automatically import it for us here inside of a script but for some reason that isn't working so you can do a close bracket and now we have our router link so let's actually import this here inside of the script tag so we'll say import and then we'll do our curly brackets and we'll say router link and this will be from and then we want to say the view router all right now we're actually not seeing our content here anymore because we haven't defined a required prop on the router link of two which informs view where this router link should go to so on the router link we want to say to and this one's going to be for the home route to actually navigate us back to the home page of The View application so we'll say home and then where this two prop should be pointed to for the Home Route is just simply slash okay and once we save that it's going to reappear because it's no longer going to have an error now we also want to create another router link for our about page so we can duplicate that down and we'll say about and we want to navigate this to prop to say about all right so if we save that and we head over to the application now if we click on about it's going to take us to the about page and we click on home it'll take us back to the home page now if you're wondering where I'm getting the values for these two props at you can actually find that inside of the router so if we expand the router folder and go to the index.js you can see that the path here is slash for the Home Route and then the path is slash about for the about route so that's how I'm coming up with these values here for the two prop now for the styles again I'm going to head over to the GitHub repository and we're going to copy and paste in the style so that way we can focus more on view So within section 4 we want to go back to the source directory we want to go to our components and we want to click on to do header.view and then we can just copy all the Styles here within the style tag and then if we check the application we should now have something that looks like this now within this to do header component on the style tag we have what is called a scope attribute that is being applied and what a scope attribute does is it's going to scope all the styles that are defined here within this component to only this component so what that means is if we had a additional header element in another component we don't have to worry about the Styles being applied to that component they're only going to be applied to this component specifically okay let's work on the ability to create new to-do's within our application so within the views folder let's open up the home view.view file and what I want to do is actually rename this from home view to to-do's view so we can rename this and then we'll just say to-do's View and then we want to head over to our router and then in the index.js file we want to update all references of Home view to to-do's view okay and then that should not cause any issues we should still be able to go back and forth between our about View and our home view now back within the to-do's view inside of our main tag let's start off by creating an H1 and this will say create to do now within this view we don't have our style tags yet so let's define those so we'll say style and then we'll give it a lang attribute of scss and then we also want to scope this so we'll say scoped and let's head over to our GitHub repository and then we want to change Branch to section five then we want to go to our source directory and then we want to go to the Views and then we want to click on The to-do's View here and then we'll just copy these Styles and then we'll paste them inside of this style tag within our component now for this input and button we're going to create a separate component and then we're going to import that component here into our to-do's view so then our components folder let's create a new file and we'll call this to do creator.view and then within this component let's use our vbase Command and we'll select the vbase 3 setup and then again what I'm going to do is I'm going to take the script and then I'm going to paste that above the template and then let's head over to our to-do's view and let's import this component so we'll say to do create a review and we'll tab in here to automatically import that for us and then if we switch over to our application and we come over to our to-do Creator component and for example we just put an H1 say hello to make sure this is working we should now see that here below our create to-do header okay so let's remove this H1 from our template and then on this div we're going to add a class and we'll say input wrap and then within this div we'll create our input and this will have a type of text and then beneath our input we're going to create our button and the value of this is going to be create so let's head over to our get a repository and grab the styles for this so we'll go to our source directory then we want to go to our components and then to do Creator and then we'll copy these Styles right here and then we'll paste them in this component and then once we do that we should have a much better looking input and button within our Apple education now that we have our UI created we want to be able to capture what a user types into this input and then create a new to do based off that value so let me show you how we can do this with View So within the script tag what we're going to want to do is create some data to store the value that the user is going to be typing into this input so how we create data is very simple it's just like creating a normal JavaScript variable so for example we can say const and we can call this a to do and we can set this equal to an empty string all right then we can use something or a special view directive called a v model to take this value and sync it up to this input so what we can say is V model and then we'll set it equal to R to do now just to test this out let's actually take our to do and output it to the template and we can do this using must test syntax we can just say to do and now for example if we actually put a value in here of testing we should see that within the template and we also see that value within our input so if we type into our input then what should happen is this testing value should also be updated to whatever values inside of this input so so if we say testing is updated as you can see this is not actually updating and although we're syncing our data which is to do with a vmodel directive on our input as you can see this is now working and the reason why is because this variable we created is actually not reactive and for this to work we have to make our variable or data reactive either using what is called The Ref method or the reactive method so let's make our data reactive and I'll show you how to do it using both methods and we'll start out by using what is called The Ref method so what we want to say is ref and we can hit tab to import this because we need to import this from View and this is a method and then what we want to do is just pass in our string here of testing and then now our data has become reactive so for example now if we say testing is updated as you can see once we type in the input now this value is also going to be updated because it is now reactive now as I mentioned there is in addition a way to create reactive data using what is called the reactive method so let me show you how that works so what we'll do is just create a new variable and we'll call this to do state and then we want to set this equal to the reactive method and we also want to import this as well so the first difference between the reactive method and the ref method is the type that the data can be so for example with this to do variable that we created which is set equal to a ref the type of this data is actually a string which is a primitive value type well when we create data using the reactive method the type cannot be primitive meaning we just can't take the string here and set this equal to our to do state this is not allowed so to achieve something that like we have here with our to do variable we would want to create an object and then within here we'd have a property called to do and then we could set this to the value of testing and then now what we could do is on our V model we would say to do state and then we would say dot to do to access that property within this variable and this will work the same way so if we actually update this to testing reactive to show you as you can see now we have it here and then again we would want to Output to do state DOT you here and as we type in the input this is still going to be reactive so another difference between the reactive method and the ref method is how we access these values inside of our script tag now within our template it's pretty straightforward if we wanted to access this to do variable we can just output to do here if you want to access this to do property within this to do state object we say to do state DOT to do but within our script it works a little bit differently so let me show you so for example let's just log out of the console we'll say to do and I am using a extension called Council ninja which if you are interested in learning more about that extension I do have a separate video on that you can watch but the tldr for this video is that it gives us inline consoles here within vs code which is pretty cool now what's happening here when we use the ref method is that this method is going to take in our argument which is the value of testing and then it's going to return it within a ref object and as you can see we have this value property within the object that contains means the value of our ref now if we for example come down to our to-do State and we log this out if we just do to do state then once we save that well we get what we would expect we have our to do property and then the value of testing reactive now the biggest difference between these two is how we access values within our script so if we want to get a hold of the actual value of this to do which is a ref we need to append on here the dot value property and then we'll get the value of our actual data whereas with to do state we can directly access this by with what we would expect by just referencing our object and then the property on that object now with the ref method one thing you may have noticed is that for example if we wanted to get the value of our to do within the script we have to use the dot value property however if we wanted to access this value within the template we do not have to say to do that value and the reason for this is view is actually unwrapping these refs within the template so that we don't need to use the dot value property within the template itself so that's the basics on the reactive method and the ref method for creating reactive data within view now if you do want to learn more about the ref method and the reactive method I did create a separate video which I'll link Down Below in the description which goes over these two methods in more depth now for this crash course it will be using both the reactive method and the ref method to create reactive data however for right now within our application we're just going to stick with the ref method for this component so let's remove this to do state variable then we want to remove the reactive import and then let's also revert back our V model to just hook up to our to do variable and we can also remove this paragraph tag as well now for this section what I recommend is you head over to the Chrome Store and you install what is called the view.js devtools and this is going to be helpful when it comes to debugging your vue.js application and we're going to be using this here within this section now that we're able to capture a user's input for their new to do we want to be able to actually create our new to do and how we're going to do this is we need to send back the input that the user has typed here which is going to be stored inside of this to do variable back to our to-do's view so that way we can create our new to do and to do this we're going to need to do something called a emit which what a emit does is it emits something from our component here of to do Creator and then we can listen for that emit here within our parent component of to-do's view and once we hear that emit we can do something and what we want to do when we hear that is then create our new to do so we want to send a emit from our to-do Creator component once a user clicks on the create button and once they do that we want to then send the value of our to do over to our to-do's view so first off what we want to do is listen for a click on this button and to do that in view we can simply just do at and then we have a whole bunch of event listeners here that we can look for or listen for and the one we want is going to be click okay so I just want to pause the video here really quick to clarify something when it comes to listening to events on the template items as we're doing here now so the method that I'm showing you is actually the shorthand for something called The V on directive and what the Von directive does is it listens for Dom events and then it's going to run some JavaScript when that event is triggered so how this would look if we weren't using the shorthand would be V Dash on colon click and then we would set it equal to the JavaScript that we want to run but instead we're going to be using the shorthand which is just using the at symbol and for for the rest of this application that we're going to be building we'll be using the at symbol or the shorthand to listen for events and then once we click we want to do something so we're going to create a function and we'll call this function create to do all right and then within our script let's go ahead and create this function so we'll create an arrow function so we'll say const create to do and let's have a SQL to a new Arrow function now within this function what we want to do is emit the current value of R to do now to make an emit from our component we first need to Define it so to do this we want to create a new variable and we'll call this Emit and then we're going to set equal to what is called the Define emits macro and we also need to import this from view just as we've done with our ref now the Define emits macro accepts an array and then we can Define all the emits that we want to create here inside of our component now the emit that we're going to create is going to be called create to do because that is what we're going to be doing we're going to be creating a new to do now this Define emits macro is going to return a function which we can use here through emit within our create to do function so we can define a mid and then we can pass it as a parameter the custom emit that we just created of create to do now each time that we click on this button what's going to happen is this create to do function is going to run therefore it's going to emit create to do from this component and we can see that if we inspect our application and we go to inspect and then within our actual inspect here we can go to our view Dev tools and then what we want to do is you want to select on this right here and we want to go to our timeline and now each time that we click if we I believe just scroll this down a little bit we can see component events now each time that we click on this create button here as you can see we have this create to do which is going to be emitted by our to do creator now if we select this event we're going to get some more details about the specific event that we're emitting from this component let me just scroll this up a little bit so as you can see the component that it's coming from is our to-do Creator the event that we're emitting is create to do and then we have this third option here for params and as you can see right now we don't have any params so what we want to send along with this custom emitted event is going to be the value of our to do So within the create to do function where we're emitting our event of create to do we can also pass a additional parameter and send along the current value of our to do so we'll do a comma and then we'll say to do and remember to actually get the value of our to do using a ref we have to say value all right so now if we refresh our application and we say this is a new to do and we click on Create and if we go down to our custom emitted event as you can see now if we scroll down we have a param and then you can see the value of our to do which is this is a new to do so now that we're able to emit from our component and send along the valley of our to do back in our to-do's view we can listen for this custom emitted event now before we do that we want to create some data to actually store all of our to-do's in so what we'll do is we'll create a new data variable so we'll say const and we'll just call this to do list and then we'll set it equal to a new ref so we can tab there to automatically import that and the default value for this is just going to be a empty array now what we want to do is we want to listen for this custom emitted event from our to-do Creator component so what we can do is say at again and as you can see because we're using volar we have the ability to actually automatically detect this from our component so we can click create to do and now whenever we hear this custom emitted event we want to run a function and the function that we're going to be creating is going to be called create to do so within the script let's go ahead and create this function and we call this create to do and then we'll set this equal to a new Arrow function and recall we are passing a param on here of our to do so we want to look for this param on our function so we can just say to do here as a param and then what we want to do is we want to create a new to do object within our to-do list array so what we want to do is reference our to-do list and to get the value of this array remember we have to use dot value and then to push a new object onto an array we use the push method and then we'll pass it a new object now for each to do we're going to have a few properties the first one is going to be a unique ID so we'll give it a property name of ID and to generate a unique ID we're going to be using our package that we installed earlier called uid so we'll need to import that here into our script so we'll say uid and then from and this will be from uid okay now to use this we just need to declare uid which is a method and that'll generate us a unique ID next we'll have our actual to do value so we'll just pass a property of to do and because the field and the actual print that we pass are both the same we can just leave this as to do then we're going to have a flag for if the to-do is completed so we'll say the property name is going to be is completed and this will have an initial value of null and lastly we're going to have a flag or a field to detect if we are currently editing our to-do so we'll say is editing and we'll pass this a value of null as well now one mistake that I did make is for our create to do function that we're running here when we hear our custom emitted event we don't need to declare these parentheses we can just declare create to do okay so if we save that and now within our Dev tools let's actually test this out to make sure everything is working so what we'll do is we'll switch tabs to go to our components Tab and as you can see here we have our to-do list array which currently we don't have any to do so within our input let's say this is a new to do and click on Create and then let's refresh our Dev tools and as you can see here we now have our to do inside of our to-do list array so if expand this we have our unique ID the is completed flag V is editing flag and most importantly are to do now we have a couple issues when it comes to creating our new to do so the first issue we have is for example if we don't have any value in our input and we click on Create and we refresh our Dev tools we're going to have empty to Do's which we don't want now another small issue that we have is for example if we add some value here so this is a new to do and we click on create so that creates our to do but it doesn't actually remove the value from the input I believe it would be much better that once we create a new to do that we remove the value that the user has typed in from the input now to make these changes we are going to need some additional data within our component we're going to need a data value to track if we have an invalid to do and we're also going to need a data value for our actual error message that we want to Output if a user has an empty to do so what we could do is actually just create two additional refs one for if our to do is invalid and then one more for the to do error message if it actually is in value wood this would be completely fine to do but since we are doing a crash course I do want to show you an alternative which is going to be creating all this data using the reactive method so how I look at it is that all these refs that we're going to be creating pretty much are going to be centralized around our to do we have the to do value then we have to know if the to-do is invalid and then we also have a to-do error message so that's why I think it makes sense to create a reactive object and pretty much group all these values together so instead of having a variable called to do we just set equal to a ref what we'll do is we'll update this variable name to to do State and then instead of being a ref we'll change this to reactive and then we want to import that up here now I should also mention that you can have refs that are objects and arrays as we have seen here within our today's view where we have a to-do list that is a ref which is an array again we're only really doing this for the sake of a crash course if you wanted to keep these all as refs you could or if you wanted to use reactive you can do that as well so what we'll do is we'll have this set to an object and then we'll have our to do property which will be an empty string then we're going to set a invalid property which will be the initial value of null and then we're going to have another flag of error message and then that'll be the value of an empty string to start and I think I spelled this wrong so we'll use our extension here to fix that as well and now that we're using the reactive method to declare our data we need to update some references here to our data within our components so no longer is it going to be to do.value it's going to be to do state DOT to do and remember since we're using reactive we don't need to use the dot value property on the end to obtain the value of R to do so that's one benefit and then also on this input instead of being to do we just want to say to do state DOT to do okay let's begin to implement the validation to our create to do function when we are creating a new to do so the first thing we want to check is we want to ensure that the value of our to do is not equal to an empty string because we don't want to create empty to do so inside of this if check what we're going to do is we'll say our to do state and then we have our to-do property and we want to ensure this is not equal to an empty string so as long as it's not equal to an empty string then we can create our new to do so inside of here we'll have our emit of our create to do event and then what we also want to say is we want to reset our to do back to an empty string so we'll do to do state DOT to do and let's have a sequel to an empty string and then we want to return out of this function now if the to do equals an empty string then the code inside of this if block is not going to run therefore we're going to have an invalid to do so beneath our if block what we can say is we want to Target our to-do State and the invalid proper 30 and we wanted to set a sequel to true then we want to update the error message inside of our to-do State as well so we'll Target to do state and then our error message and this will read to do value cannot be empty now each time that we run this function we also want to ensure that we reset the invalid property back to null so at the very beginning of this function before if check we can Target our to-do State and then the invalid property and we'll set this back equal to null now if we do have an invalid to do we want to let the user know and we want to show them this error message that we have defined within our application so in our template beneath the input we'll create a paragraph tag and we're going to add a class of error MSG and then we're going to use must test syntax to Output our errors so we can say to do state and then we'll do error message like this so now for example if we go to create a new to do and we don't have any value in here and we click on create as you can see we're going to get output of the error message to do value cannot be empty now if we have a to-do that has value so for example this is a new to do and we click on create then it's going to create that to do and it's going to remove the value from our input and if we refresher Dev tools we can see that to do is added to our array so we created a new to do and we no longer have an invalid to do within our application but we're still seeing our error message being displayed within the application which we don't want to fix this we can actually use some special directives that view offers to only show this if we actually have an error within our to do and those directives are called the show and VF and I'll show you how both of those work so to do this I'll just copy down this paragraph tag and we'll start off with the vif directive so we Define the VF director by saying V Dash if and set this equal to and this accepts a true or false statement if the value is true then it'll show this paragraph tag if it is false it will not and only want to pass it here is our to do state DOT invalid property so if this is true then we want to show the paragraph tag if it is not then we don't want to show it so we'll say to do state DOT invalid and as soon as we do that we're going to see ones though because we still have this paragraph tag so if I remove this and save it as you can see now we're now are going to see our invalid message but if we have a invalid to do then that's going to show so let's take a look at the V show directive so let's uncomment this paragraph tag and then we'll comment out the one with the V if directive and then on the paragraph tag we just wanted to find our V show directive so it's V Dash show and this also accepts a true or false statement so again what we want to say in here is to do state DOT in Dallas because we only want to show this paragraph tag if we have a actual invalid to do so if we save that and then we hit create here as you can see we are still going to see our message and if we create a successful one then that is going to disappear so as you can see these directives both do the same exact thing they're going to hide or show our paragraph tag based on a Boolean condition so what is the difference between the V show directive and the vif directive well if we head on over to our inspect tool and we select the elements tab we can see what the difference is so let's expand this body tag and then we want to expand our deal with the ID of app and then the main tag and as you can see here we have this comment that says V if and then we have one paragraph tag which has a style set to display none so what the vif directive does is it doesn't render in the element to the Dom so as you can see we don't see the paragraph tag where the V show directive is going to render in the element to the Dom but it's going to set the style and then the display to none so for example if we attempt to create a to-do that has no value then that paragraph tag that had the V if comment is going to be rendered in right here and then the paragraph tag with the V show directive is going to have that style which had a display of none that's going to be removed from the element then if we actually create a new to do so we'll just say a new to do and hit create then as you can see that's going to disappear and it's going to be rendered out of the application and this one's going to have the style set back to display none so you might be wondering which directive should I use the V if directive or the V show directive and that's mainly going to depend on what exactly you're doing so the VF direct is going to have a higher toggle cost because you're actually destroying and recreating the element within the Dom itself where the V show directive that's always in the Dom the style of display none is just going to be toggled back and forth so a general rule of thumb when it comes to these two is if something needs to be toggled quite often then you want to go with the show and since this error message is going to be toggled quite often I feel the best fit is going to be using the V show directive for this component so let's go ahead and remove the paragraph tag with the V if directive now when we have an invalid to do I think it would also be a good idea to have some sort of different UI state for our input itself and we can actually add a dynamic class to this div with a class of input wrap when we have an invalid to do and this is called class binding so on this div of the class of input wrap what we can do is we can add a dynamic class to be applied when a certain condition is true so we can say colon class and so the sequel to an object and what we want to do is we only want to apply a certain class when a certain condition is true so the class we're going to apply is going to be called input err and then we say colon and then the condition now we only want this class to be applied when our to do state.invalid property is true and if we save this and now as you can see we currently have a invalid to do and as you can see that class was applied here to the div that also has a class of input wrap and then if we actually have a valid to do that class should be removed from that element now for this to actually work we're also going to need to actually apply this class to our style sheet as well as a class for our error message and we can actually get those over from the GitHub repository so let's switch to section 7 and I believe we should already be in the to-do Creator so what we want to grab is this class of input error which is just going to change the Border color so we'll just paste this above the focus Within and we'll also want to grab the styles for our error message so we can copy this and we'll paste it just below the input wrap itself and now if we head over to the application and we attempt to create it to do with no value the input itself is going to turn red and now we have our styled error message now what I want to show you next is probably not necessary for the application that we're currently building however since we are doing a crash course I want to make sure to at least cover it and what that is is slots and what slots allow you to do is pass template data to your components to make them more Dynamic and a very common way to utilize slots is through a reusable button component now for this application we're not going to be having very many buttons in fact the only button that we're truly going to have is within this to do Creator components so again this isn't probably very necessary to do but I want to show you how we could use slots so what we're going to do is create a new component for our button so in our components folder we'll create a new file and we'll call this to do button Dot View and then let's create our view boilerplate so we'll save the base and we want the three dash setup and then let's move our script to be above the template so what we want to do is head back over to our to-do Creator component and we want to copy the markup for our button and we want to paste it within our new component and we'll remove these div tags and we can also remove this click event here as well then we're also going to want to get the styles for this so in our to-do Creator component we can grab the style which is going to be right here so we'll copy the button style which is very simple and we'll also paste this within the style tags and back within the to-do Creator component let's remove the styling for our button we no longer need this and then we can also remove the button here as well so instead of having the button markup directly within the template we're going to use the component we just created instead so we'll say to do button and for some reason this is an auto imported again so we'll just save that and then we want to import it up here within our script so we'll say import we'll do to do button and then we'll say from and then we want our to do button and once we save that we shouldn't again see our button and what we also want to do is add our click Handler on this as well so we'll say add click and then we'll set the SQL to our create to do function now the problem that we have with our to do button component we created is that if we wanted to reuse this component for other buttons within our application well the value is always going to be create so instead of having the value of create within our button we can actually replace this with a slot tag and the slot tag also accepts a name attribute if you have more than one slot within your component that way you can name them so for example we can call this button if we wanted to but since we're only going to be having one slot we don't need to add this name attribute so what a slot tag does is allow us to render in our own template content so for example if we head over to our to do Creator component and we remove the self-closing to do button tag and we add a closing to do button component tag and now within here we can Define any template content that we want to be defined within our button for the slat tag so anything that we Define within our to-do button component is going to be rendered in for the slot tag so now if we say this is a new value then once we save that this is going to be rendered in for the button content so what the slot does is it makes our component more Dynamic allowing us to put any type of content we want within our to do button so what we can also do if we don't want to necessarily Define a slot we can also have fallback content within our slot so back on our to do button instead of leaving the slide tag empty we can put the value we want it to have by default so that way if we don't Define anything within our component the fallback content will be displayed and for the sake of our application since we're only going to have one button we don't need to define a closing to do button tag we can just have a self-closing tag and then our slot fallback content will be displayed now that we have the ability to create new to-do's we want to be able to display those within the application and to do this what we're going to do is create a reusable component that we're going to use for each to do item that we have within our list so within our components folder let's create a new component and we'll call this to do item Dot View and within here we'll use our Command of vbase and we want to select three setup and then let's just move the script tag above the template now back within the to-do's view what we want to do is we want to look at our array of to-do lists and for each to do that we have within this array we want to create a to do item component and to handle this we can actually use a special director from view called the V4 directive now what this directive does is it's going to Loop through the array that we have of all of our to-do's and for each to do that we have within this array we can request that an output our to do item component So within our template below our to-do Creator we're going to store all of our to-do items inside of an unordered list now within this unordered list we can Define our to do item component and we can tab to automatically import that in and then give it a self-closing tag and once we save that we should now see our to-do item component being displayed within the application now on this to do item component we want to add that V4 directed because we want to Output a to-do item component for each to do item that we have within our to-do list data so what we'll say is V4 and what this does is it accepts a param that you want to use to reference each to do that we have within our array so the paramet we'll call this is to do and then you say in and then you want to iterate over the actual array in our array in this case is going to be our to do list so as soon as we save this we're no longer going to see our to do item component in the application because we don't have any to Do's within our to-do list array so let's create a few different to-do's so we'll say this is a new to do and I'll copy this and we'll just do like number one and we'll hit create and as soon as we create one we're going to see our to-do item component now in the application and if we create another one and say number two for example now we're going to see two to do item components within the application so now they're able to create a to-do item component for each to do that we have within our to-do list array what we want to be able to do is have our to do item component accept this param of to do which contains all this information on each to do it's going to contain the ID the to do and these two flags of is completed and is editing and to do this we want to be able to have this component except a prop with our to do param so to define a prop on our component we want to say colon and then we want to give the prop a name and in our case we're going to call this prop to do and then we want to set it equal to the value that we want to set this prop to so in our case the value is going to be our param of to do and now that we have this prop defined we want to head over to the to do item component and we want to Define this prop within our component So within this script let's declare a new variable and we'll call this props and we'll set this equal to what is called the Define props macro now this macro either accepts an array or can accept an object and the recommended way to declare props within view is by using an object but I will show you how to do both and I'll explain why it's better to use the object over the array so for the array we just want to pass an empty array and within here as a string we want to Define our prop so we would just say to do because that is the value that we defined within our to-do's view now the issue with the finding your props as an array is it doesn't give you much information on the specific prop that is being defined within this component now yes we do know that for this prop it's going to be an object but if other developers or if you come back in a few weeks and you're taking a look at your component you might not really remember what exactly this prop is or what it's doing so that's why it's recommended that you use the object syntax instead of the array syntax and once we Define our props as an object you'll see that it's much more easier to read and understand what exactly that prop is doing so let's remove this array and let's define a new object and within this object we can Define our props as a property so for example we have our to do prop so we can just say to do which is a property which will be set equal to an object and within this object we can Define different properties for this prop so the first property we're going to Define is going to be the type and this is going to inform us of what type this prop is and the type of our to do prop is going to be an object so if we pass anything except an object then view is going to yell at us because we have to find this prop to be a type of an object we can also Define a required property here to inform that when we Define our to-do item component in our application that we want this prop to be required on that component so we do in fact want this we're going to set this to true and lastly we're also able to set a default value for the prop itself and how you do this is you just want to define a default property and then you set the value to whatever you want the default value for the prop to be now this works only if your type of prop is a string number or Boolean this isn't going to work if you have a type of object or a type of array so for example if your type is a string you can just set a default value of maybe hello or maybe if it's a number you can just say nine now if the prop has a type of object or type of array then the default value must be returned within a factory function so we can say default open up our curly brackets and then return either our object or array now we're not going to be needing a default value here for our prop within this application but I did want to show you how we can do that so for now we're just going to be having a type property and also a required property within our prop now as you can see when you define props using the object syntax it's going to provide you a much better understanding of what exactly that prop is and what it's doing so say for example for a new developer coming into this application we can see that this to do prop should be an object and it should always be required within the component and not only does this give you a better understanding it also offers prop validation for the application so let me show you what I mean so let's open up our Dev tools and then open up the console then if we navigate back over to our to-do's view So currently we have our to do prop which is being set equal to the to do param now if we change this to maybe something like a string with a value of hello and we save this and then we come back over to our application and we try to create a new to do and we go to create we're going to get this warning because the prop expected a object but I got a string with a value of hello and the same thing will happen if we don't Define a prop at all so for example if we remove the entire prop of to do and we save this then as you can see it's going to get another warning that it's saying missing required prop of to do so now that we have the to do prop Define within our component let's begin to work on the markup so what we'll do is we'll remove this div and we'll create an Li tag and within this Li attack we're going to have a input and the type is going to be a checkbox and this is going to be for toggling the to do from completed to not completed Now when using a input with a type of checkbox we have the ability to use a attribute called checked and what check does is allows us to control whether or not this checkbox is checked or not and what we want to do is we want to sync that attribute to a value we have on our prop of is completed so to do this we'll say colon and then we want to do checked and we want to set this equal to our to do prop and then we have that property of is completed and let's spell that right and let's save this and what we can also do to see the changes we make within our component is let's actually create a new to do so we'll say this is a new to do and once we create this we should now see our checkbox now beneath the check box we're going to create a new div which is going to have the class of to do and within this div we're going to first create a new input that's going to have the type of text and what this is going to be for is when we edit or update our to do we want to be able to type into this input to update the value of that specific to do now beneath this we're going to have a span tag and what we want to do within here is actually output the value of R to do so to do this we're going to use must test syntax and then we'll say to do dot to do and then we should see that within the application here so earlier on within this crash course you'll learn that we can sync up a data value from our script to an input within the template using what is called the V model directive now we don't want to do that within this component because what that's going to do is it's going to update the prop or the value of that prop directly within this component which is something you're not supposed to do within view when it comes to updating the value of a prop you should always handle that within your parent component in which that data exists which is going to be within our to-do's view so what we can do is instead of using a v model we can use a value attribute and we could sync that value attribute up to the current value of our to do so we can say colon value and then we can set this equal to R to do dot to do and then we should see that value now within the input and we'll be covering how to update a value of a prop within an upcoming section in this crash course okay now below our div with the class up to do we're going to create a additional div and this is going to have the class of to do actions and what we're going to store inside of here is going to be all the icons for each one of our to Do's so where we're going to get these icons from is going to be the package we installed earlier called iconify so what I've done is I've searched up the icon that I'm looking for which is called check Circle and then I narrow down the search results by the author which we're going to be using one called phosphor and if we scroll down you can see we have six different icons we can use that are in relation to our search so the one we're going to be using is this first one which has a name of pH colon check Circle so what's really cool about this library is we're able to customize the icon directly on the website itself so for example the color that we want for this icon is going to be this green so we can do that and then the size we want is going to be 22 pixels so as you can see we can customize the icon directly here within the website and we can also do some other things like flip it horizontally or vertically row rotate it and also do a mode of block or inline which we're going to leave all this as it is and then if we scroll down it tells us how we can actually use this icon inside of our component or view file so the first thing we want to do is actually import this into our component so in our script above our props let's import this and just underneath where it tells us how to import it it shows us how we can actually use this icon component within our template or view file so what I'm going to do is copy this snippet of code right here and then within our to do actions we just want to paste this in to the div so now if we save this and we head over to our app we should now see this icon so why I really like iconify is there's access to a ton of different icons from a bunch of different authors so if you're looking for different designs or different themes you're probably more than likely going to be able to find that by using iconify in all the different authors they have for the icons and it's also really easy to customize as you can see if you want to change the color of the icon we can add a color attribute if you wanted to adjust the width and the height of the icon we can add a width attribute or a height attribute now in addition to our check Circle icon we're also going to be having two other icons we're going to be using for this component so what I'm going to do is just copy down this icon component twice and then to update the icon all we have to do is update the icon attribute so we're going to be using the same author for all these icons so all we want to do is update the name and the second one we're going to have is going to be a edit pencil so the name of this is pencil Dash fill and we're going to leave the color the same color of green and the width to be 22 and the final icon we're going to be using is going to be a trash icon so the name is going to be trash and then we'll update the color so the color is going to be f95 e e5e which should be a nice red so if we save that we should now have our three icons we're going to be using for this component so also what we're going to want to do to our icon is add a class to each one of these so we'll do a class and on each one we're going to add the class of Icon because we are going to Target these within our styles now for the style of this component we're going to head over to the GitHub repository and we're going to copy and paste these Styles in so this is section 9 so we'll want to switch to the section 9 Branch then we'll go back to our components folder and we're going to select the to do item and then we want to copy all these Styles here within the style tag and if we save that and head back over to the application we should have a much nicer looking to do now one thing we're also going to need to do is add some styles to the whole entire list itself which is back in our to-do's view so what we're going to do is we're going to add a class to our UL which is going to be called to do Dash list and for the style let's head back over to the GitHub repository and we're going to go back to our source directory and then the views folder and then our to-do's view and then what I'll do is we're going to have two classes we're going to be adding one for the to-do list and one for the to-do's message which we're going to be adding here in just a moment so I'll copy these two and then I'll paste those just below the H1 and now if we check the application that should look a lot better there's now a space between our to do and then the actual to do Creator component now for this crash course as I mentioned earlier I wanted to focus more on view and less on the actual styling of the application itself now the styling of the application is fairly simple and straightforward however I do want to mention a few things about this component that we just created so what you may notice is when we hover over the actual to do component then the icons are appearing so how that's happening is initially on the to-do actions we have the opacity set to zero and when we hover over the Ally item we're targeting the LI in a hover State and then we're setting the opacity of the to do actions to one and the other part I want to quickly mention is this custom checkbox that we have so when we click on it it turns green and when we toggle it off it goes back to this white so how we're creating this custom checkbox is with this CSS right here so we're targeting the input or the type of checkbox and then we're setting the default appearance to none and then we have the CSS properties here to style that up and then we're targeting the input in a check State and then we're just setting the background color to what we have here which is this green color now for this to do item component we don't want to show every single element that we have within this component initially for example with our input with the ability to edit the to do we only want to show this if the to do is being edited same thing goes for this check icon we only want to show this if the to-do is being edited so what we can do is within our template we can use what is called the vif directive to only show these elements if certain conditions are true now if you recall we have two directives to do this we have the vif directive and the V show directive why I'm going to opt to use the V if directive is because this application could have a bunch of to-do's and we might not necessarily actually need each one of these inputs for each of the to do so why would we want to render in that input if we're only going to need it for a few different items so that's my reasoning for using the vif directive for this component instead of the V show now you could do that but in my opinion it's probably best to go with the VF directive and I'll also show you a really cool feature to use in the VF directive that you don't have while using the V show directive so on our input let's add the if directive and we want to set this equal to the to do prop and then we have a property on here of is editing so initially this is not going to be true so we're not going to see the input now one cool benefit to using the vif directive is we can also chain along right below the actual element that we're using the VF directive on and use something called the VLS so what this does is it's going to say if this is true then show this input otherwise show our span tag and you can also use another directive or another chain to this and say V else if and set this equal to another condition if you wanted to so it would check this one first and then if that wasn't true then it would do another check to say hey is this true then maybe show this otherwise as a last resort then you can use your VLS but since we only have one condition for this input and span we can just say the if or V else now we're gonna do the same exact thing with our icon so we only want to show this first icon which is our check Circle if the to do is currently in an edit mode otherwise you want to show this pencil fill icon so what we can do is just copy this vif directive and we can paste it on this first icon and then we can copy this V else and we can paste it on the second one so again what's happening is we only want to show this first icon if the to-do is currently being edited otherwise you want to show this pencil icon and if we hover over the to do now we should only see these two icons now currently if we don't have any to Do's within the application we are informing the user that we don't have any so what we're going to do is beneath the to do Creator component we're just going to Output a message if we don't have any to-do's within our application so beneath our UL let's create a new paragraph tag and we're going to give this a class of to Do's dot MSG which this is a class we actually just copied into our style sheet So within this paragraph tag the first thing we're going to Output is actually an icon from iconify and that icon is going to be the sad but relieved face so what we'll do is first off since we haven't actually used iconify in this file we need to import it so we're going to copy the import and that'll just go right beneath our uid import and then we can use this component the template so let's copy this snippet of code here and then we'll paste it within our paragraph tag and we actually don't need this color attribute so we'll remove that as well and beneath the icon we're just going to Output some copy and that copy is going to say you have no to-do's to complete add one so if we save that and now we head back over to our application we should see that message being displayed now we only want to see this message if we don't have any to Do's within our application so how we're going to handle this is by using the V if directive so we'll say V if and then what we're going to do is we're going to look at the length of this array so if there's entries in the array meaning it's greater than zero then we'll show this UL so what we'll do is we'll say to do list and then we'll get the length property and then we'll say if this is greater than 0 show the UL otherwise we'll use our VLS directive and then we'll just show the paragraph tag so if we have to Do's within the application then we'll show them if not then we'll show this message so let's try it out so if we say this is a new to do the message should disappear and we should see our to do and then if we refresh the application we're not going to have any to Do's we should see the message now with each to do that we have within the application we're going to want to be able to interact with it and do a few things the first thing that we're going to focus on is the ability to actually complete each to do now when we complete a to-do from a UI perspective we're obviously going to have this checkbox turn green but we're also going to add a strike through on the text as well and from A View perspective within the application what we want to do is we have this property of this completed that we're going to want to update to either true or false depending on the status of the to do if it's completed or not now recall that if we want to update this is completed property on our to do we can't do it within this to do item component because you're not supposed to update the value of a prop directly in the child component you're supposed to handle that within the parent in which that data exists which would be our to-do's view so what we'll need to do is within the to do item component we're going to listen for a change on this checkbox of either it's selected or deselected and each time that we either select it or deselect it we're going to emit a custom event from this component and we're going to listen for that event within our to-do's view and when we hear that event on this component what we're going to do is create a function that is going to update this property that we have on each to do of is completed now to implement this functionality the first thing that I'm going to do is honor V for Loop we can actually pass a second parameter and that parameter is going to be the index and the index is going to give us the position of each to do that we have within our list so for example this current to do is the zero position inside of our array so this index value for that specific to do is going to be zero and you'll see why this is going to be important here in just a moment so what I'm going to also do is we're going to need to pass this index param as a prop within our to do item component so what we'll say is colon index and we'll set this equal to the index and within the to-do item component let's define this prop so right beneath our to do prop we'll create a new prop of index and the type is going to be a number and we'll also want this to be required as well so we'll set this to true okay now on our input with the type of checkbox we want to listen for this input to be updated or for it to change and to do this we can use a event listener called input so let's define that so we'll say at and then we'll say input and then we'll set this equal to and then what we want to do each time this input changes is we want to emit a custom event from this component so we can actually do a inline emit without actually creating a function because we really don't need to create a separate function to do an emit it makes sense to do it directly here within the template so to define a inline emit they call it we can do the money sign and then you do Emit and then you define the emit name now remember we're still going to need to define the submit within our script but what we can say is this is going to be toggle complete and what we want to do is we can also pass along a param here at the submit and we want to pass along the index and the reason why we're going to pass along the index is to get a reference to which to do that we want to update this is completed property on and let's say this and that should make it a little bit easier to read now we also need to define the submit within our components so beneath our props let's use the Define emits macro so we'll say Define emits and then within our array we'll Define the submit that we're creating which is going to be toggle completes and now back within the to-do's view let's listen for this event so we'll come all the way to the end here and once we save it it should format a little bit better we'll say at and then we'll do toggle and complete and then what we want to run here is a function we're going to create called toggle to Do complete all right so we save that it's going to be a little bit easier to read and let's define this function so beneath our create to do function let's actually create our new function and we'll call this toggle to Do complete and then we'll set the SQL to a new Arrow function and for the param on this function remember we're passing along the index which is going to give us a reference to the position in which is to do exists within our to-do list array so we'll call this param to do POS and within this function what we want to do is Target that specific to do that we're going to update this is completed property on so what we'll say is to do list and then we'll say dot value and then using our param of to do POS we can Target that specific to do by using brackets and saying to do POS and then the property that we want to update is going to be is completed and what we're going to do is set it equal to the opposite of whatever that value is at so we'll say equal to and then we'll use an exclamation point and then we can just copy this exact line right here and then we can paste it right beside the exclamation point so every time this function runs it's going to update this is completed property to the opposite of whatever it is and now within the application we should be able to toggle R to do from completed to not completed and we can see this if we open up our Dev tools and we go to the view Dev tools and then we can inspect our to-do's view and we should be able to see our to-do list array and now if we select on the check box and if we refresh the state we should see that the is completed property is now set to true and if we unselect it and refresh the data you can see it's now set to false now what I need to do gets completed in addition to having a green check box we're also going to add some strikethrough to the text itself and how we'll do this is by using a class bind on the span tag that contains our to do so what we'll say is colon and we'll do class and we'll set a SQL to a new object and the class that we want to apply is going to be called completed Dash to do and we want to say colon again and we only want to add this class when our to do has a is completed property of true so we'll say to do which is our prop and then we'll say the is completed property and then within the style sheet what we want to do is within this to do right above the input we can just paste in this style that I have for our completed to do class and what it's going to do is set the text decoration to have a line through and as you can see now when our to-do is completed we have this line through it and if we uncheck it then that is going to disappear okay so the next thing we're going to work on with this to do item component is the ability to edit R to do so what we want to have happen is when we select on the pencil icon we want to be able to display the input and then update the to do and to handle this what we're going to do is on our pencil icon we want to listen for a click and once we hear that click we want to emit a event from this component and what we want to actually update is going to be this property of as editing and we want to set that to true so on the pencil icon what we want to do is we want to listen for a click so we'll say at and then we'll do click and what we want to do is a inline emit so we can do this by saying money sign and we'll do Emit and the custom event we're going to emit is going to be called edit Dash to do and we also want to send along the current index to reference that within our to-do's view to get reference to the specific to do that we want to update and to use this custom emitted event within our component we wanted to find this within our Define emits macro so we can copy this and then within our Define emits macro we can just add a comma and then we can Define our new emit of edit to do then within the to-do's view we can listen for this custom emitted events so on our two item component let's listen for this by saying at and then the event was called edit Dash to do and then we want to run a function we're going to create called toggle edit to do and we can copy this function name and we can Define it within the script so we'll say const and then that'll be toggle edit to do and then we'll set this equal to a new Arrow function and we also want to make sure this function accepts the param for the current index so we'll call this to do POS now within this function we want to do the same exact thing that we have done within our toggle to Do complete so what we can do to save some time is just copy this line and we can paste it within our function of toggle edit to do but what we want to do is change the property for Miss complete we want to change this to is editing and then we can just copy this and we can paste it on the other side as well so let's test this out now in the application let's just Define a new to do and then we'll select create and now what should happen when we select on the pencil icon this property of his editing should be toggle to true and therefore show the inputs you Editor to do so if we click on the pencil icon as you can see now the input is displayed and we can update our to do now the one issue we have is if we attempt to select on the check icon to save our changes and revert out of the is editing mode well this doesn't work so what we want to do is we need to head over to the to do item component and as you can see we have the click Handler on this pencil icon but we don't have a click Handler on the check Circle icon so what we want to do is copy this click Handler with our inline Emit and we want to paste it on this icon as well alright so if we save that and now we head back over to the application and we select on the check then that is going to revert it out of the is editing mode so if we attempt to edit this to do by selecting on the pencil icon and we type in a new value we just type in update and we want to save the change as you can see once we save it our new value is not actually being saved now to handle this what we want to do is you want to listen for this input to have a change using the input event listener and each time that we hear this change we want to emit a new custom event with the current value that's in our to do and then what we're going to do is back on our to-do's view we're going to listen for that event to be emitted from this component and then we're going to take the new value that the user has typed into the input and then we're going to update our actual to do so back within the to do item component what we want to do is we want to listen for the input event on this input so let's define that so we can say at and then we'll do input and then what we want to do is another inline emits so we'll say money sign and then we'll do Emit and the event that we're going to emit or the name of it is going to be called update Dash to do and then let's say this to reformat it really quick and we have an error so oh these need to be single quotes so let's just copy both of these and change those single quotes now along with just emitting update to do we also want to send along a few parameters so the first parameter we want to send along is going to be the current value of this actual input okay so how we can get that is by saying money sign event and we can grab the Target and then grab the value of this input so that's going to give us the current value for whatever the user has typed in when they're actually in the input typing okay and then also we want to send along the index to get a reference to the current to do that we're going to be updating and again we're going to need to define the submit within our Define emits macro so let's come over to our Define emits macro in the script and let's define this custom emitted event and now back within the to-do's view let's listen for this custom emitted event so right beneath our edit to do we'll say add update Dash to do and then we're going to run a function we're going to create called update to do so let's copy this and let's define this within our script so we'll create a new Arrow function and we'll call this update to do and then we'll set a SQL to a new Arrow function now within this Arrow function we want to accept our parameters so we have the to do value and then we also have the to do position so we'll say to do Val and then to do POS and within this function what we want to do is Target that to do so we can say to-do list dot value and then we can use brackets and then our param of to do POs to reference that specific to do and then we want to access the to do property and we want to set this equal to our param of to do Val and now we should be able to update our to do so let's give this a try and inside of the application it looks like our to-do got wipes so we'll create a new one and we'll hit create and now if we edit our to-do and we update the valley so we'll just say update and we select on the check icon now you can see the updated to do is going to display within the application okay now the final thing that we want to implement to our to-do item component is the ability to delete this to do and to handle this within our to-do item component again we're going to want to emit a custom event so let's scroll down to our icon and what we want to do is you want to listen for a click on this icon and then we want to run an inline emit again and the event that we're going to emit is going to be called delete Dash to do now instead of passing along the index as a parameter we're going to take our prop of to do and we want to pass the property of ID instead then to use this custom event within our component we just want to Define this within our Define emits macro So within our array let's just create a comma and then Define the delete to do event and now within our to-do's view let's listen for this custom event so honor to do item component we'll say at and then this is going to be delete to do and then we want to run a function we're going to create call delete to do all right so let's copy this and let's define this function within our script so I'll say cons delete to do and then we'll set this equal to a new Arrow function now for the param we're going to call this to do ID because that is what we're passing and to remove the to do from the application we're going to use what is called the filter method so what we'll do is we're going to reference our array to-do list and then we want to set the value and we're going to set this equal to The To Do List dot value and then we can run a method called filter now what the filter method is going to do is it's going to Loop through our array and what we can do is pass it a callback function and we'll just pass an arrow function and then what we want to do is pass it a param that's going to reference each item within our to-do list array so we can give this a param of to do so then this Arrow function what we want to do is reference our param of to do that we're passing inside of this callback and then on this param we have access to the ID of that to do and then we want to say not equal to and then we want to reference our param that we're passing from our custom emitted event of to do ID and now we should be able to delete our to do from the application so let's give this a try and let's create a few to do so we'll say this is a new to do number one and we'll copy this and we'll hit create and we'll create another one say two and then we'll do one more and we'll say three and now if we attempt to delete number two we should be able to do that and as you can see now we have to do number one and to do number three left within the application now currently within the application as you can see we have a couple to Do's but if I attempt to refresh the application then those to Do's are going to be removed from the application now to avoid losing the to-do's when we refresh the application there are a few things that we can do so we could save our to-do's to a database and each time that we refresh or come back to the application then we can reach out to the database and populate the application another simpler option that we have is we can utilize what is called local storage which is what we're going to do for this application so we can save all of our to-do's to local storage and each time that we refresh the application we can reach out to local storage and populate the application with those safe to Do's now to handle this we're going to create a reusable function which is going to save our to-do list array to local storage then we'll execute that function each time that we create it to do or have an update to our to do so beneath the to-do list array let's create a new function and we'll call all this set to-do list local storage and we'll set this equal to a new Arrow function now within this function we're going to reference local storage and we have access to a method called set item which is how you set an item to local storage and this accepts two parameters you're going to have a key and then you're going to have a value so for the key we're going to pass it a string and this is basically going to be the name of the item we're setting to local storage so we'll pass at a value of to do list now for the value of this item inside of local storage it must be a string so what we want to do is we need to stringify our to-do list so to do this we can say Json and then we have access to a method called stringify and then we want to pass it our to-do list array so we'll say to-do list dot value and now each time that we call this function we're going to set an item in local storage that has a key or name of to-do list and the value of this item in local storage is going to be the current value of our to-do list array now in addition to having a function that's going to set an item to local storage we're also going to need a function to retrieve our items from local storage when we refresh the application so beneath our to-do list array let's create a new function and we'll call this fetch to do list and then we'll set this equal to a new Arrow function and within this function what we want to do is get a reference to the item inside a local storage of to-do list so we'll create a new variable and we'll call this saved to do list and then we'll set the SQL to now when we retrieve an item from local storage we need to parse it so what we'll say is Json dot parse and then inside of this method we can pass in the local storage and then we have a method called get item and this accepts a param of the key that we set which is going to be to do list so within here we can pass it a string and say to do list like this now this variable that we created is going to have a reference to all the to-do's that we have saved within local storage but for example maybe this is a brand new application and we haven't used it then we might not have any items inside of local storage so for that reason what we want to do is an if check and we want to check if this variable is not equal to null because if this value inside of local storage does not exist then this variable is going to be null so if this value of save to-do list is truthian has value then what we want to do is we want to reference our to-do list array and we'll say dot value and then we'll set equal to our save to-do list now we want this function of effects to-do list to run each time that this page is loaded in and to do that we can just simply execute the function within the script tag because each time that this page is loaded in all the code within the script tag is going to be executed so we can just say fetch to do list like this and now each time the page is loaded in this is going to run and it's going to check to see if we have any to do stored inside of local storage and if we do then it's going to set those equal to our to-do list array and those should be displayed within the application now the last thing that we need to do is each time that we create a new to do or make an update to one of our to-do's we want to run this function of set to-do list local storage to set the most updated version of our to-do list array to local storage so what we want to do is take our function and we want to run it within each one of these functions so we can set it in our create to do and then we also want to do it in these four functions in which we're doing updates and with that set we should now be able to create to-do's and update our to-do's and have them saved to local storage so let's give this a try so let's create a new to do and then we'll hit create and now if we refresh the application we should still see the to do once we load back in it's going to reach out to local storage and then it's going to populate the application with our save to do and we should also be able to make updates to this as well so we can just edit this and just say update it and save it and then refresh it and there you go we are now able to save our to do so local storage so that we don't lose them when we refresh the application now currently we're executing this function we created called set to-do list local storage each time that we create a new to do or when we have an update to one of our to-do's and there isn't anything wrong with how we had this implemented however I do want to show you a alternative way that we could handle something like this using a function available to us within view called watch and what the watch function does is it listens for a change on our reactive data and once it hears that change it's going to invoke a callback function in which we can execute some JavaScript and in this case what we want to do is whenever this to-do list array updates we want to then run our function we created called set to-do list local storage now to use the watch function we're first going to need to import it from view so where we're importing this ref we can just do a comma and say watch all right now we're going to actually implement this is just going to be right beneath our to-do list array so we'll say watch and this accepts a few parameters the first parameter is going to be the reactive data that we want to watch which in our case is going to be this to-do list array so let's define the to-do list array now the second parameter that this function takes in is going to be the Callback so for this we're just going to pass an arrow function and within this function we can execute any JavaScript that we want each time that this to-do list array gets updated now within this callback you can also pass in a few parameters and those parameters are going to be for the new value of the to-do list array and the old value so for example you could say new value and then you can do old value like this and then you could reference that within the JavaScript here however we're not going to be needing this but I just thought I would mention that you are able to do this within this callback now the third parameter that this function accepts is going to be an object for different options that you can configure for this watch function and we're not going to be covering all the options that we can add to this watch function but one that we are going to add is going to be called a deep property and what this does is it's going to allow us to track changes deep within this to-do list array since this array is going to contain objects if you don't pass as value of true then what's going to happen is it's going to be unable to detect when certain properties within objects within this array are updating so for that to happen we need to pass this deep property within the options and set that to true and to test this out within the Callback function what we can do for now is we can just do a simple console.log and we can just say hello all right now what I want to show you is if we come over to our application and now we start to make changes as you can see this is going to run because the to do within this array is being updated so for example if we click on the edit Button as you can see that's going to run if we make a change to our to do that is going to run now let's clear the console with console ninja so I'm going to clear the output and if we change this deep property to false I want to show you what happens all right so if we save that and we do a refresh so obviously initially it's going to run but now when we make changes to the actual to do as you can see this is not going to fire because what's happening is it's not looking deep into this array within those objects to track if those certain properties within those objects are changing so this is why we need to have this deep property set to true now instead of logging out to the console hello each time our to-do list array gets updated we instead want to run this function of set to-do list local storage so let's remove this console.log and instead run this function and where we invoke this function within our other functions such as create to do and within our updates we want to remove this as well and with that all updated Let's test this out within the application so let's edit this to do and we'll change the value to number three and we can save that and then let's also just toggle this to be completed now with these updates that we made to the to do this Watcher should have ran therefore invoking this function of set to-do list local storage updating our to-do within local storage so now if we refresh the application it's still going to pull in this updated to do and now we have an alternative way to update our to-do's within local storage using the watch function now the final piece of functionality we're going to implement for this application is when we complete all of our to-do's we want to display a message informing the user that they have completed all these and to do this we're going to use something within view called a computed property now what the computer property does is it takes in what is called a getter function and it's going to return a read-only ref object for the return value of that getter function now to use a computer property we first need to import it within this file very similar to how we've done our ref and the watch function so we'll do a comma and we'll say compute it and then what we're going to do is meet the watch function we have we're going to create a new variable and we're going to call this to do completed and we'll set this variable equal to the computed function that we just imported so we'll say compute it and within this function this accepts a callback so we're going to define a new Arrow function and within this callback which is considered the getter function we want to return a value which is going to turn this variable that we created of to do completed into a computed ref and within this getter function what we want to say is going to be return and what we want to return is our to-do list array and we want to Loop over every single to do within this array and we want to check to see if the property we have of is completed is true for all of our to Do's so to do this we're going to use a method called every so we'll reference our to-do list array and then we're going to get the value of this and then we can execute a method called every now this method takes in a callback so we'll pass it an arrow function and this callback is going to accept a parameter which is going to reference every single to do that we have within this to-do list array so for the param we're going to Define this as to do and what we want to do within this callback is we want to check that the to-do is completed so we're going to reference our to-do param and then we want to grab the property of is completed now what this every method does if you're unaware is it's going to Loop through our entire array and it's going to check each one of our to-do's and what it's going to check for is if this property is completed is true and if all of our to-do's within the array are completed then the returned value from the every method is going to be true now for example maybe we have three to do's and only two of them are completed well then not all of them are going to be true so therefore the return value from the every method is going to be false now the reason why we're using a computed property over a traditional ref or something like this is because what's special about the computer property is it automatically tracks the reactive dependencies so what that means is each time that our to-do list array gets updated then this computer property is going to reevaluate which is something that wouldn't happen if we were just using a normal ref So within the application what I've done is I've created a few new to-do's and we're going to test this out to make sure everything is working so what we'll do is we'll go to our inspect and then we'll open up the view tools and within here as you can see we have this to do completed which is set to false right now which is considered a computed value so if we just minimize this a little bit and now if we go to toggle these as you can see once we toggle all of them and we refresh the dev tools then that value is now going to be true if we unselect one and then we refresh the dev tools as you can see now that's going to be false because not all of our to-do's are actually completed so now they're able to track when all of our to-do's are completed we're going to Output a message within the application when all of our to-do's are completed now beneath this paragraph element we're going to create another one so we'll say p and we only want to show this paragraph if our to-do's are completed and if we actually have to Do's within the array so we're going to use a vif directive for this and what we're going to do is within this directive we're going to say to Do complete it and we also want to check that the to-do list array we're going to check the length on this and we want to make sure that this is greater than zero and on this paragraph element we're also going to be adding a class of to-do's message so we'll say class and then we'll say to Do's Dash message and within this paragraph element we just want to Output the message so what I'm going to do is copy and paste this in so we're going to have an icon which is going to be this party popper from the nodo-v1 author and the message is going to say you have completed all of your to-do's So within the application as you can see we have not completed all of our to-do's but as soon as we complete this last one we should now see our completed message and if we uncomplete any of them that message is going to disappear all right so that's going to wrap it up for the building of this application now one thing I did add which is kind of Irrelevant for the actual sake of this crash course is some content on this about page it just gives you some general information about what this application does and why it was created and if you want to add this to your application you can find that within the GitHub repository now for this View application that we built one thing that wasn't required was the need for additional page or route so what I want to show you is how we can create one now in this application we currently have two routes we have the Home Route which is our default route which is where the actual to do application lives and then we have this additional route that was created called about now for each route we have three required properties we have the path then we have the name and then we have something called the component property which is going to tie this path to a certain component so as you can see for this Home Route it's going to tie into our to-do's view now the one difference between the Home Route and or about route is how the component is being defined for that specific route so on this Home Route here what's happening is the component is actually being imported at the very top of our index.js file and then it's being referenced for this component property now on the about path what's happening is this component property is accepting a function which is importing this component and this is referred to as lazy loading the route and I'm not going to get too in depth with what this actually does but essentially it's going to generate this component into a separate JavaScript chunk therefore it's going to improve the performance of The View application now if you don't want to Lazy load in your routes for whatever reason although I should mention that it is best practice to do so you can import your component the same way as we have within this default route so you can import the component at the very top and then declare it like you're seeing here within this component property and you might be wondering well why don't we lazy load in this Home Route component and the reason why we don't need to do this is because this is the default route and and therefore this route is going to be loaded initially by default so we don't need to Lazy load this route in okay now that we know the basics about a route let's create one so for this what we want to do is we're going to create a new view and since we're not really going to be utilizing this view I'm just going to be calling this testing view dot view all right and then within here we can just say vbase and we'll select the three setup and we can just save that and then back within our router file we want to do is create a new object so for this we're going to define a Path property and the path we can call this whatever we want we'll just say slash testing and then for the name we'll Define this and we'll call this testing and then for the component property we're going to use lazy loading so what we can do is just copy this component with the function and we can paste it in here and instead of referencing the about view what we can do is we can say slash and then we want to say testing view Dot View and that is all you need to do do for creating a new route So within the testing view file that we created what we can do inside of our div is just put an H1 and say testing and now within our View application if we go to this route of Slash testing we should now see that page being loaded in all right now that we have our application completed I'm going to show you how we can deploy this application to netlify so for this what you're going to want to ensure is that you have a account with netlify and if you don't have one you can sign up for free so to sign up you want to click on this button here in the navigation and the easiest way to sign up in my opinion is by using GitHub now once you have your account created you should be taken to a dashboard that looks like this and how we're going to be deploying this application to netlify is we have a button here that says add new site and if we click on it we have a few options and all we want to select is going to be import and existing project and to me this is the easiest way to deploy your application to netlify so what we're going to do is we're going to create a new repository on GitHub and we're going to push all of our code to that repository and then what you're going to want to do is you're going to want to connect your account here to GitHub so that way we have access to all the GitHub repositories and if you don't want to use GitHub you don't have to as you can see you have a few other options to choose from but for the sake of this crash course I'm going to be using GitHub so what you're going to want to do is connect to the git provider so you're going to select this button and what it's going to do is it's going to authorize your GitHub account so that way you can see all the repositories that you have now for this we're going to need a new repository over on GitHub so let's create that so over on GitHub let's create a new repository and we're going to give this a name so we'll call this view Dash to do's and we'll say crash course but feel free to name this whatever you want and then we'll just choose to make this private and then we can leave all these other options blank and then we can just select create Repository so once you have created that you should see the screen here which is going to inform you how to create a new repository on the command line so back with nvs code let's open up the integrated terminal and then within this terminal window what we first want to do is ensure that we're cd'd into this view to this folder so we'll say CD and we'll do view Dash to do's now the first thing that we want to do is initialize a new git repository and to do this you want to use the command git and we say init so what that did was initialize a empty git repository so what we want to do next is then we want to run the command get and we say add and we want to add all the files and to do that we say period and then we can do enter now for the rest of this process we're just going to be referencing GitHub so what we want to do next is what is called a git commit so we're just going to copy this line and then we'll paste it in here and what that did is commit all the changes that we just added which essentially is this entire repository since it's a new repo next we're going to want to run this command of git remote which what this is going to do is connect this GitHub repository to the repository that we have within vs code so let's copy this and then we'll paste it within our terminal and with all that completed we can run the final command of get push to push all these changes up to this GitHub repository and now back here on GitHub as you can see once we push all those changes up we're going to have all of our files here inside of this GitHub repository so back here on netlify now that we have our GitHub repository created and all the source code pushed up we can search for this repository so in the search bar we can say view to do's and hit enter and once that searches we can select on the repository that we just created now now the fight is pretty intelligent so we actually don't have to do any configuration we can leave everything how it is by default and click on deploy site now the deployment process will take a few minutes but as you can see now our changes have been published so if we select on this URL here we can see our deploy to do application alright that's going to wrap it up for this view crash course hopefully you found this helpful and feel like you're in a good position to start building your own view applications now that you completed this crash course you might be asking yourself what's next I'd recommend to start simple what I mean is get a few wins under your belt so instead of rushing into building another application or a project continue to explore and expand on what we built in this crash course you could do a number of things with this application such as the ability to drag and reorder to Do's animate the creation and deletion of to-do's or you could even go as far as having the ability to create different lists for different days so that way users can see to Do's from previous days the point I'm trying to make is there's a lot of things you can do to add on to this application to continue learning View and improve your skills if you do end up taking this application a step further be sure to let me know by joining my Discord server where you can share your progress with myself and other view developers thank you for watching this crash course if you did enjoy it be sure to leave a like on it down below and subscribe if you are new here to the channel I'll see you in the next one take care

Channel: John Komarnicki

Views: 78,106

Keywords: vue 3, vue 3 crash course, vue 3 for beginners, vue crash course, vue, vue.js

Id: KTFH4P8unUQ

Length: 118min 46sec (7126 seconds)

Published: Wed Feb 01 2023