Intro to Vue 3 + Composition API: Build a Todo App

hello friends welcome to coding garden with cj uh in this video we're going to build a to do app with view 3. we're just getting started this is my break timer if you've been watching youtube all day feel free to stand up take a quick stretch and um uh we're gonna get into it so we are going to be using vue.js 3.0 now today is september 21st 2020 and vue.js 3.0 has been released but the ecosystem is still working on things so um the view router vue x uh some of the uh associated plug-ins and tools are still all in beta so they're not completely ready for view three yet but view three is usable now what we're going to do is we're going to build a super basic to do app using view 3 and the composition api so this is one of the the biggest changes in view three uh one of the things that i like about v3 it's very similar to like hooks and react but that's what we're going to use to build this app and i will mention um if you look at my youtube channel which i guess you're doing right now there's a build a to-do app video if you search for coding garden view to do uh there's a video uh this one um this uses vue.js 2.0 we're going to build the exact same app but we're going to use vjs 3.0 let's get into it let's get let's go let's go let's go so what i've already done is i've already generated an application and what i needed to do uh for that was run um view create uh to-do app so this uh runs the uh view cli make sure you have at least version 4.5 i think i have version 4.6 and then you choose view 3 preview i've already done that we have our app running and what i've also already done is i have ripped out all of the existing components and all of the existing styles we just have a basic app that says view three to-do app and then we have our checklist right here let's get into it so first thing i need is a form for creating new to-do's and and i for this video i'm just going to put everything in a single component uh it could be a separate video where we start to break things out into separate components and we have props for now we're just demonstrating the basics of view here so i need a form i'm going to add a form right here uh we're going to need an input that says um well no we have an input and that input will have a label um i i can code yes i can code that just says like new to do like this um and then we'll have a button that says uh add new to do all right let's see what this gives us [Music] so we have a label we have an input i want to be able to say my to-do is to learn view three when i click add new to do that should uh add it to a list of items here so we have our basic form that's great um while we're here let's go ahead and give this thing a name so we'll name this new to do should be good uh yeah that's good four done check mark all right call a function when the form is submitted now um in vue.js you can add event listeners to elements now the one way to do it is with v dash on and then you can specify any dom of it but a shorthand for that is the at signs if you do the at sign you can specify any event and then you can specify a function that will get called so i care about the submit event and when that is called i want to call a function that is something like add new to do right okay so we need this function add new to do now one of the newest things in view.js3 is the composition api and for that instead of having um options on your object so instead of having your data and your methods and your computed so this is known as like object options right you have a bunch of properties each of those things defines the the parts and pieces of your component with the composition api you have a single function called setup and you do all of the stuff that you want inside of there so let's say i i want to have a function called add new to do and for now i'm just going to log form was submitted right so i have this function and when the form is submitted i want to call that function so what we do from setup is we return an object and whatever properties are on this object become available inside of the template so because we want this add new to do function and we've defined it here we're just going to return it like this and now what that does is it makes this function available inside of the template so whenever this form is submitted this function is going to get called right so uh let's let's see what happens let's open up the console we'll say uh hi mom add new to do the page refreshed does anybody know why the page refreshed well thank you ace i appreciate you prevent default yeah we got to prevent the default action um and uh one thing i'll show you is vue has a nice little uh helper for doing that so all i gotta do is just say dot permit and it automatically prevents the default action i don't have to access the event and say event dot prevent default i can just say dot prevent there's a there's a few other helpers like that as well so now that we're preventing the default action we should see form was submitted woohoo yeah yeah okay so hi mom i need to do form was submitted great so we're calling a function when the form is submitted beautiful great job vue.js um now um now no no no no we want to keep track of what the user has typed into the input and for this we're going to use what's known as a ref so we need some sort of reactive variable right we need to keep track of of when of what the user has typed in that input and for that we'll use a ref so this is new in view js3 i'll say import ref from view now the cool thing about this is that this is actually reusable outside of vue.js this this is just a nice little function for creating um properties or variables or objects that can basically respond to change and you can know when those things are changed but we need a ref for new to do so i'll say new to do is a ref that starts off as an empty string right so this is kind of like having a new to do property on our data that is initialized to an empty string i'm going to expose new to do to the template by putting it in the object here and now i'm going to bind the user input to that specific variable and to do that i use the v model directive so on the input i can say v model equals new to do and uh what so v model is provided by vue.js and whatever is here corresponds to something on our component or on our data basically and so what this automatically does is it adds a change listener to the input when the input um receives a change event it's going to update this ref behind the scenes and we're going to see that latest value um uh displayed um now this is not actually two-way data binding it looks like it it's it's it's a one-way data binding in disguise it's under the hood it does exactly what you would do in react where you uh added an event listener and then in that event listener you update state it's just syntactic sugar it's still a one-way data binding um cool so we have the string uh let's let's make sure that it's actually working so um now that we have v model there um it's it's listening for changes so we can actually expose that so if i put a little h2 and i put new to do right here because this input is bound to this property here and this property is a ref this is a reactive property we should see the latest value there so um let's do it so if i say hello world wow this is so cool uh you can see that that h2 is reflecting reflecting the latest value that we that we've put in there um wow wow um actually should i turn on some of wow no the effects are off or are they effects on here wow okay that's enough of that um so you can see that it's it's automatically bound um great we actually don't care about this i just wanted to show you that by by putting the model here it automatically updates that thing behind the scenes great um so we did that all right now log the user input when the form is submitted so right right now we're just saying in our submitted function we're saying form was submitted but let's say i want to show what the user actually typed into that box and in this case we're going to log new to do dot value and this is actually extremely relevant to what for par just asked so is ref the object or the value in the case of a string so that's why for for like primitive types that's why we have this this wrapper and that's why i have to say dot value because as you know in javascript uh strings are immutable right so if you want to change a string you just have to create a new string and and overwrite whatever whatever is inside of a variable you can't actually modify the string itself so whenever you create a ref this is an object wrapper and it has a property on it called value and that is what the latest value is and so some people don't like this because it's a little bit different from vue.js or start from a view too where you can just directly modify those properties in this case if i want to change it um i do have to set new to do dot value equal some other thing yeah okay so that should be fine and basically whenever i submit the form we should see whatever the user typed into the form logged to the console so if i say learn view 3 click add new to do there it is new to do dot value has the latest value so that's great we have access to it um now we want to keep track of all the to do's great um and uh i'll say this if you're interested in creating a basically an object that has multiple properties on it and you don't want to use a ref because technically even if you if you put an object in here you would still have to say dot value we showed earlier you also have access access to this thing called reactive and reactive is kind of similar to setting up your data you could do something like data is reactive with an object and here we could say new to do is an empty string here we could say to do's is an array and now that we have this reactive wrapper i could say data.newtodo equals a thing or data.todos.push and it would work i wouldn't have to use dot value but for now we're just going to use refs because they're simple easy all that good stuff uh yeah and so that's the other thing um that i like about the composition api is you don't have to worry about this um i mean even even so in vue.js it automatically binds your methods for you so this is usually what you expect it to be but in the composition api you don't even have to worry about that there is no this because it's basically whatever is accessible inside of that scope that's what you modify and change um all right what were we going to do create an array yeah so we we now need um an array of to-do's and i'm gonna i'm just gonna create another ref so i'm gonna say to-do's is a ref that starts off as an empty array just like that and then i want to make those to-do's available inside of my template so i'm going to return it right here like that um and what else does it create an array yeah we did that great so this this is how i create a reactive array uh we're now going to push a new to-do into the array whenever we say add new to do so instead of just logging it we're going to say to dos.value.push and we're going to push in an object where done is initially false and the we have a property on it i guess we can call it content the content or the value is new to do dot value so what we're doing is when that function is called it just pushes an object into the array like i mentioned we do have to use dot value here maybe maybe after this video i'll use reactive and i'll show you how we would do it with reactive you wouldn't have to use dot value you could just use your state et cetera this is fine this is fine so we push it into the array that's great now we want to show that array on the page now that list of items um so we've we've pushed it in done is false now we actually want to show the list and this is where we use the v4 directive so i'm going to add a little div right here and basically i want to repeat this div for every item in the to-do's array and this is where we use v4 b4 will say item in well we can say to do in to-do's so this is going to uh repeat this element for every to-do in the to-do's array um and to-do's like we showed was exposed on our data here so it should work um let's say we just have like an h3 that has to do.content so to show the content we need handlebars and we'll say to do.content and then we also need some sort of key here um my editor is complaining because i don't have a key set um let's actually just add an id and we're going to set this to date dot now now in the real world you wouldn't do this your ids would probably come from a database they would be unique this is going to be unique enough because i'm the only one using this and the date should be unique when i add an item but just know that this needs to be uni a unique value so right here i'll say um key equals um to do dot id and to actually pass that value down i need to i need to bind it so if i the the syntax for that is v bind like that um but you can leave off v bind and just put the colon now yes and for part has another good question with the composition api inside of the template do i have to say dot value you don't so you can see that here i can just say new to do i don't have to say new to do dot value and then here i can just say to do's so uh the the render function here and that's basically what this is even though it it looks like html this actually gets compiled into a component render function the render function knows that it needs to access dot value in order to iterate over it but you can you can leave that off here's another quick stretch and we're almost done we're kind of kind of home free so this should show um all of the to do's and actually i don't know why i did this but this this needs this should be a should be a list item right we have a list of to-do's and we should put this in an unordered list here we go this is better i like this better we have a list and then we're repeating a list item for every item all right so if i say learn view three and i submit it boom it's in the list um now i i'm asking you you the viewer how can i clear this form right so right now it says learn view three i clicked add but it's still there typically a good user experience is to clear it how do i clear it how do i how do i do that any guesses form dot reset oh that probably would do it i don't have a reference to the form though uh you the viewer clean the very nice form one two three right so let's let's think about this uh not to not to do's dot value so to do's is the is the list what we want to clear is what's bound to the input so because the input is bound to new to do yeah line modes has it so because this is bound to new to do if i say new to do dot value equals an empty string that'll clear it out so push it into the array and then say new to do dot value equals nothing and because the input is bound to new to do the input should clear so uh let's clear this yeah you all got it you got it you got it um and it'll say learn view three boom input cleared that's awesome uh you absolutely could add like an element reference and do form clear but yeah we're not we're doing it the view way in this case we're we're modifying the thing that we're that we're bound to so that's great um let's look at our to-do list uh yeah so we're showing the to-do's uh check done honest to do to mark it as done awesome okay now things are gonna get a little more complex so uh we can show many things we could say like uh learn the composition api we'll add it um learn javascript not necessarily in this order but what i want is whenever i click on an item i want to put a line through it so that we that way we show that that thing is done and we can see that every to-do has a property called done which is initially false so here's what we want um when we click the item so actually when we click the text itself so i'll say when this text is clicked i'll say mark uh we'll say toggle done and we want to toggle done that specific to do so um what i'm going to do is i'm actually going to just pass in this to do to this function toggle done um and you'll notice that i'm not creating an arrow function there's no sort of like closure scope or anything like that i literally say i have a function called toggle done and i'm passing in this specific to do that i clicked on to that function called toggle done so now i need a function toggle done in my component that takes in a to do and we just toggle it so we'll say to do dot done equals not to do dot done great uh and then now we need to expose this function toggle done uh to the template and that should do it so i'll save that and we'll say learn view three we'll add it and you can't see it but i'm pretty sure it's working uh but to actually show that it's working i'm gonna i'm gonna do some uh some uh uh bound css some pound styles um do i have that in my in my to-do how do you make how do you make brain go fast show a line through the to-do so we're technically we're marking it as done but we need to reflect that in the ui and for that we're going to use we can use a style bind or actually no we'll use a we'll use a class binding so let's say i have a class called done and um that done yeah that's how css works so i have a class called done and then we're just going to do text decoration as line through like that mb dealer thank you for the thousand bits that's a lot of bits i appreciate you um but um yeah so if the element has the class done then it's going to have a line through it and so now we can just we can just bind that so i can do colon class and then pass in an object so the way class bindings work is you specify the names of the class that you'd like to apply to this element so in this case i want to apply the done class to that element so i want to say done but i only want to apply that class if do dot done is true so uh i specify the name of the class i want to apply is done and then i can specify an expression that if that expression evaluates to true add that class to the element so i'll just say two dot done like that so if to do dot done is true apply the done class to this element and look at that it works and i can i can click it all day long boom i can add new things learn the composition api wow uh and we can also mark those done too um i mean technically i should show like a cursor so if i give this a class of to do um let's say uh to do has a cursor a pointer that way the user knows that they can they can click on it like that uh this code rocks says this is experimental let's take a look yes we showed this earlier i'm not going to get into this just because it it potentially is confusing but let it be known that there's actually an even i want the cleaner there's a there's another way of using the composition api in that setup function um with this but we're not going to get into it because we were using it earlier there's some caveats to it but okay so we can mark things done that's great isn't that great isn't that great yeah and so it's adding and removing the class we can look in the in the dom inspector to actually see what happens so you can see that right now this h3 has a class of done but if i click on it it removes that class so basically that that object that we specified if to do if if done evaluates to true apply the class called done that's basically what's happening there it's great it's great isn't it so this says uh if this and so this this can be any valid expression uh on the inside of this object so this this could be a function call this could be multiple ands and ors but if this expression evaluates to true then done uh the done class gets applied to that element great um so that's awesome and then let's let's uh delete to do so inside of here i want a little button that says not a butt demonetized i want a button that says uh remove to do um and so when i click that button it should remove the to do from uh the uh from the array um and let's let's let's do this so very similar to whenever we we toggle the toggle the thing we want to say when this button is clicked we want to remove to do with to do now technically i could pass in the to do but probably what is easier is to pass in the index because if i pass in the index then i can just splice it from the array good job so i'm actually going to spec i'm going to i'm going to get access to the index here inside of this v4 and the way you do that is by saying the element comma index and now that i have the index i can pass in the index and then we'll use that so now i need a function called remove to do that's just going to go right here remove to do gets access to the index um and then we just modify the array so we'll say to dos.value dot uh slice return a section of the array splice remove an element from the way so we want splice so we want to splice that specific index and we want to splice one of them so this function will now remove one specific element at that index and we should be good to go now if you're coming from the react world you're probably used to immutable state right and and for a remove you probably would have done a filter technically we could do that we could we could do a filter but there's no need because to do's is reactive the the template knows whenever it changes so if we push into it if we remove from it the template is automatically going to update so that should handle that um so we'll say learn view three learn the composition api and we'll say build a to-do app all right uh so i can mark them done i can unmark them done that's great can i remove it yes i can um and that works just fine awesome so i think that's it i think that's it for our basic to do app oh one more thing adam add a button to mark all to do's as done um so let's do that so we need a button probably right here that just says like mark all done um and then when we click this we need to call a function that's like uh mark all done and then that function should mark all of them as done so let's do that here and to do that uh we just need to iterate over the to do so i'll say to dos.value for each so for every element in that array we're going to get the um the to do and we're going to say to do dot done equals true so we literally just iterate over the array and modify every element to set it to true and that should do it uh and then we'll just make this function available um in the template like that so we say learn view add it i have all of these auto completes uh learn react sure why not you can learn all the things learn the composition api great but if i say mark all done then it now marks them all as done awesome uh username unknown is saying can you do method definitions instead of a standard function um specifically with the the composition api and setup uh no because basically what you need to do is you return an object and whatever is on that object gets exposed inside of the function the component itself now could we technically create a methods option and does this get merged i actually have no idea and i don't think i'd recommend it i would say if you're going to use the composition api uh stick to that don't try to use the older vue 2 stuff you still can but yeah we could add removal to do's it actually is very very simple um we just set the array to empty so we'll say uh remove all remove all this is this is bonus this is not in the to-do list uh get bonus content for watching the video this long remove all to do's remove only done to do this uh this is this is feature feature creep in a nutshell but we'll we'll do this one remove all and remove all is uh simple enough we literally just reset the array to be nothing bonus content um but this is where we'll say to dos.value equals uh nothing just reset it to an empty array and that will just wipe them all out so we'll expose this and it should be good so we'll say uh hello world how are you wow and we'll say remove all and it just removes them all awesome this is great to do.length equals zero would that work too to do is.value.length can you clear an array by setting its length to zero let's see hmm does this work yeah that's another way to do it i i like doing this though i like doing that all right i think that's it uh this is a super basic super basic duck introduction to vue.js 3 and the composition api this idea of creating reactive values this idea of creating functions and then this idea of exposing functions and reactive values to your template and then using those things inside of your template we also showed like class bindings and a few other things now i will say there is a lot more to the composition api i'm just showing it in a very small very simple application the composition api itself really starts to shine when you have a larger app with more functionality that needs to be shared between components and different things like that but that's for a future video this is just basic view 3 composition api stuff yeah and so that's the other things i didn't get into computed properties watching properties i'll i'll tell you that behind uh view is also these functions called like computed so if i wanted to create a computed property i would use just this little function here um if i wanted to watch something i could use that little function there um so basically all of all of the ways you're used to creating things as options on a component you could use these functions instead yeah and so ref is very similar yeah so uh uh that that's read colin just mentioned ref is very similar to use state but it's better this this isn't a video comparing it to react but i'll tell you this um refs uh you you they they can be defined in any order they can be conditional and react they can't be i'm not going to get into that but yes this is very similar to use state but better all right that's it that's all thank you for watching this video which was a basic introduction to vue.js 3 and the composition api but like i said there's a whole lot more there's a whole lot more to come watch my channel there'll be more videos all that good stuff bye youtube everyone say bye to youtube thank you for tuning in and uh join us here on twitch where we uh we have fun we have fun like this bye youtube content all right see you later this is the part of the video where uh a suggested video pops up and then the subscribe button pops up too bye bye youtube love you

Channel: Coding Garden

Views: 72,758

Rating: 4.9039478 out of 5

Keywords: twitch, games, javascript, vue 3, vue.js, composition api, hooks, todo, todo app, learn, beginner, livestream, live coding, vuejs, ref, reactive, computed, learn javascript, learn vue, learn vue 3, intro to vue, intro to vue 3, intro to composition api

Id: rncY1tlWShM

Length: 29min 52sec (1792 seconds)

Published: Wed Sep 23 2020