Vue 3 Animations Tutorial #2 - Starter Project Walkthrough

Key Takeaways

all right then gang so in this video i'm gonna walk you through the code that makes up this project right here and demo how it works in the browser and that way when i'm switching between components and adding animations in the future you're gonna understand what parts of the app i'm working on now if you want to skip this and move straight on to animating then feel free you can go to the next lesson but for the rest of us first of all let's run this in the browser so the home page is just a simple to-do list we have two already there and we can add new ones if i type in here and press enter we can delete them and if i delete all of them we get a message right here saying woohoo nothing left to do and if i try to add a blank to do we get this error message at the top so first of all let's have a look at the code for this home page in the text editor so let's dive into the source folder then interviews which is where all of our page components go so we have a different component for each page on the website so the homepage right here this is what we see on the homepage here and it's simple at first glance we have this toast component which is this notification at the top when we tried to add in a bad to-do and then also the to-do's themselves which is this input field and the list so let's dive into this thing first of all and take a look at that and by the way this thing this is a custom events and we'll see more about that later on this is what is fired when we try to add that bad to do but anyway into the to do's component which is inside this folder then to do's so we have a div that surrounds the whole thing with a class of to-do's then an input at the top which is this thing and what we're doing is giving this a v model and setting it equal to a ref call new to do and that is inside the setup function right here and that's so we can track what a user is typing into it so whatever we type into the input is being stored in the value of this ref then under that we have this key press event and this modifier enter and that means that whenever we press enter inside the input field it's going to fire this function add to do now that again is set up inside this setup function add to do and what we do is see does new to do have a value have they typed something into the input field first of all if they have then what we do is create a new id by using math.random then we take the to-do's ref which is storing the to-do's and each object is a to-do with text and id and we add that new to-do to the array and then we assign that new array to to-do's.value so every time they add a new item it's been added to this ref right here okay then after that we reset new to do back to be an empty string and that's so that when we add a new to do this goes clear again all right cool now if we don't have a value if a user presses enter and there's nothing in new to do we get this error right here and that's because what we're doing here is saying look if we don't have a value emit this custom event and the reason we can use emit is that we've destructed it from the second argument the context object inside setup and we emit this custom event bad value now if we take a look at the home page again we can see that we listen for that custom event and when it occurs we fire this function trigger toast and that is down here and what we do inside here is set the value of show toast which is this ref to be true now when this value is true the toast will show because we have this v if attached to it and it's only going to show this if this is true so when we try to add in a blank to do it's going to fire this event it's going to fire this function it's going to update this to true and show that toast at the top that error and we also set a timeout so that we turn this back to false after three seconds and that means after three seconds it's gonna disappear again so we see the error at the top for three seconds only okay so that's how this works and we'll see this component later on anyway back in here up here we check do we have to do's dot length because we only want to output the to do's if we have a length in this array if the length is zero it's not going to output them and we output this instead where we say v else but if we do have length then we have a ul and then we output an li tag for each to do so we're cycling through the to do's which is this right here and for each one we output an li tag where the key is the to-do id right here and we also attach a click event to each one which is going to fire a function called delete to do and it passes in the id of the to-do that we want to delete so that function is down here delete to do we're taking the id and all we're doing is updating that to do's value whereby we're filtering out the to do with the id so when we click it it takes out the array okay now inside the li tag we just output the text of each to do so that's pretty much it inside this components let's now have a look inside this toast component very simple we just have a toast wrapper and then a toast itself and then a message and we style those down here i'm not going to get into too much detail about how these styles work basically we just give it some simple ones position fixed background color etc etc and it shows up like this at the top okay cool so that's the home page but we also have two other pages the about page right here which is really simple and also this contact page so the about page is this component dead simple just an h1 and some paragraph tags and very simple styles that's all there is to it the contact page a little bit more complex because we have icons we have each of these things right here now first of all i'm loading in material icons to the index page right here using google fonts so we have that library and when we have that library in order to output an icon all we have to do is use a span with a class of material icons and then the name of the icon in that span and when google fonts sees that it's going to replace it with an icon okay so each icon has its own name and we have the icon stored inside this ref in the name property so this is the name of the first icon this is the name of the second this is the name of the third and the fourth etc so when google font sees those it replaces it with these icons right here we also have a text property for each one which is the text we see underneath the icons so all we're doing inside the template is cycling through these icons and we're outputting an li tag for each one whereby the key is the icon name because it is unique for each case and then in a df we output the icon text all right then we style these down here we say the ul displays grid and the columns are one fraction to the left and one to the right which is why we see two next to each other and then a grid gap of 20 pixels max width of 400 pixels margin auto left and right which is why it sits in the center of the page and then each li tag we say list style type non background white yada yada very simple styles now finally i just want to go to the app.view because we have this nav that sits at the top of every page this router view this is where our page components are output but this div with an id of nav has three links two forward slash forward slash about and then forward slash contact so that's these three things at the top and i registered those routes inside the index router file right here so that is about it it's a very simple website but enough of one to show you how to add some nice view transitions and animations so let's get started in the next lesson by learning about the view transition component