Vuetify: Create an App with Vue JS - in 30 MINUTES!

in this video i'm going to show you how to create this beautiful to-do list app using beautify and vue.js from scratch in 30 gosh darn motherflipping minutes if you're new here my name's danny i'm an indie app developer and creator of fudgit if you want to learn how to create cross-platform apps and web apps using technologies like vue.js click subscribe and click the bell so you don't miss anything so let's take a look at this app that we're going to build so it has a draw which can be toggled with this button with links to our two pages an about page and a to-do page it has this gorgeous tall header with a background image of mountains and clouds it has this text field with a button which we can use to add tasks we can mark a task as done by clicking on it and we can delete a task by clicking this delete button and it's also going to look great on both mobile and desktop as well let's get started with beautify so you want to go to viewtifyjs.com click on get started and we're going to be using the view cli and if you don't have that installed and you want to click through to this link click on get started and installation and it says here view cli requires node.js so you need to install that first if you don't already and you probably want to download the one on the left here and then you can install the view cli with this command so i'm just going to run that in my terminal okay the view cli is now installed and we can now create a new view project so we want to jump back to the beautify page and we basically want to create a new view app with the view create command cd into it and then run view add viewify to add beautify to the project so you want to make sure you're in the folder where you store all your projects and then run view create and then the name of our app and i'm going to call this beautify dash to do and we want to choose manually select features and we can use the space bar here to select or deselect options so we want to enable router and view x and css pre-processors and you want to make sure you disable the linter and then we can just hit enter and it's asking us which version of view we want to use and at the time i'm recording this beautify doesn't support view three for now you want to choose version two use history mode for router we want to choose no to that pick a css preprocessor i'm going to choose sas with scss where do you prefer placing config i'm going to choose in dedicated config files save this as a preset i'm going to choose no to that okay it's finished creating our view project but we still need to add beautify to it so we need to cd into the folder and run view add viewtify and i have the folder where i keep my projects here and i can see the project it's just created view device to do so i'm going to drag that into my editor open up my terminal and run view add beautify and we want to choose the default preset and it's finished adding beautify to the project so if we open up the package.json file we can see a couple of scripts here so we just want to run this serve script so i'm just going to run npm run serve okay our app is now running and it gives us a link here so we can just command and click on that to open it in the browser so our basic beautify app is now running and beautify has some wireframes that can really help us get started with our layout so we want to go to the beautify site then getting started and then wireframes and i'm going to use this base wireframe so this wireframe has a nice navigation drawer that we can use to add some links and if we click on this button down at the bottom then we can see the source code so i'm just going to copy all of this source code so i'm going to go to source then app.view i'm just going to paste over this entire thing and save that and we now have a nice starter layout for our app and this drawer will be toggled on desktop by clicking this button and on mobile it will be hidden by default but can still be toggled with this button let's add some navigation links to this drawer so that we can navigate the pages of our app so i'm going to jump to the beautify site and go to ui components and navigation drawers and this basic drawer looks pretty good so i'm going to click on view source on that and i'm just going to copy the v navigation draw component before we paste over our existing v navigation drawer component we can see it has the v model set to draw which is this data property down here and this is what's determining whether this navigation draw is shown or hidden and it also has this app prop as well so let's just see what that's doing so i'm going to jump to api click on this link and so the app prop designates the component as part of the application layout so this prop basically just makes the component part of our global layout so i'm just going to paste over that code that we copied over this v navigation drawer and i'll save that and we can see that this doesn't have those props so i'm just going to add those so we need to add a v model set that to draw and we need to add this app prop as well so i'll save that and you can see the top part of the drawer we can't see the navigation links let's have a look at the console property or method items is not defined but referenced during render so within this navigation draw we have a vlist with a v4 loop which is looking for an array called items which we don't currently have in our data property so i'm going to jump back to the navigation draw page and click on view source again and as well as a template tab we also sometimes have a script tab as well and we can see that items array here so we need to add this to our data array so i'm going to copy that items array and add it to our data so i'm just going to split this up onto multiple lines and paste in this items array i'll save that now we can now see these navigation items and we're only going to need two pages in our app to do page on an about page so i'm just going to modify this array here i'll get rid of the photos item save that and now we just have two items and i'll rename the first one to to do and save that and i'll also change this title and subtitle up here so just change the app name to beautify to do change this subtitle to best to do ever save that okay this is looking pretty good now although these links aren't currently doing anything so let's set up some pages and routes so we do this in this index.js file in the router folder and if we look in there we already have some route set up one at the path slash which is pointing to this home.view component which is in the views folder and one root of the path slash about which is pointing to this about.view component however these are not currently working because we don't see a home page when we're at the path slash or if we go to slash about then we don't see an about page and if we go to the beautify site and then ui components and application and down to default application markup tells us that if we're using view router which we are then we need to add this router view component so let's jump to our app.view file uh we need to place this inside our v main component so let's just add that router view component here and save that and if we now go to the path slash we can see this home page component is being loaded and if in the address bar we go to slash about then we can see the about page and navigating our app with the address bar isn't much fun so let's hook up these links in our navigation drawer so i'm just going to jump to app.view and take a look at this list which is spitting out these links so we have a vlist component and then within that we have a vlist item component for each item so i'm going to jump to beautify ui components and lists and jump to the api section and then v list item let's see how we can add a link to this so i'm gonna scroll down and we have this to prop and this denotes the target root of the link so we can just add a two prop to each the list item and set it to the path that we want it to go to and these items are being pulled in dynamically from this items array so let's add a new property to each one called two the to-do link wants to just go to the path slash and then the about link wants to go to the path slash about and then we need to bind these properties to our view so i'll jump to the v list item and add a two prop i'll just set this to item item.2 so we'll save that and let's see if we can navigate now and yeah it looks like we can let's see if we can change the icon for this to-do link here so if we go to beautify and then ui components and then icons so it says that we can use all of the material design icons from this page so i'm going to open up this page we have tons of different icons we can use and we can search as well so i'm going to search for to do this icon looks pretty good and the name for this icon is format dash list dash checks so we just jump back to app.view and down to our data so we can just change this icon property here to mdi format list checks so mdi format list checks save that and we can now see our icon updated let's get our pages ready so let's do the about page first so we want to go to source views about dot view i'm just going to change the text in this heading to about beautify to do i'm just going to add some paragraphs with some lorem ipsum save that and we could do with a bit of padding on this page and if we go to the beautify site and styles and animations and spacing we have some really handy padding and margin classes that we can use and the way we use these classes is if we want to use padding then we use the letter p and then a letter to denote the direction of the padding and then we just add a dash and then a number to denote the size of the padding so the larger the number the more the padding or the margin so let's add some padding to our about page so i'm just going to add a class to this div so p for padding a for all directions and then a dash and then let's just try six and save that and that looks pretty good okay let's work on our to-do page now and our to-do page component is currently called home.view so let's rename that to to do dot view and this has now broken our app because if we go to our router file router index.js it's currently looking for a component called home.view which no longer exists so we need to replace all occurrences of home with to-do so here and here um we want to change the name of the route to to do as well and change this to to do let's save that and it's now working again so let's get rid of all this stuff on our to-do page so we'll open up to do dot view i'm just going to get rid of everything inside this div i'll just add a heading which says to do page we'll add the same padding class we added to the about page so p a six and we no longer need this hello world component so we can get rid of this import and we can get rid of this components object and we can also delete the hello world component as well in the components folder let's improve this header and if we go to our app.view file this header is this v app bar component so let's see if we can find a nicer one on the beautify site so we want to go to ui components and then bars and then app bars i'm going to scroll down look for a really nice one and this looks really good with this background image and it's nice and tall so i'm going to click on the view source button i'll just copy the v bar component and before we paste over this one let's just note that this v bar component currently has an app prop on it which designates it as part of the global layout and also this v at bar nav icon which is this button here has a click handler on it which is just toggling the draw prop to show and hide the draw so let's paste over this code we've copied and save that i'm just going to reload that and the header is currently overlapping our content we can't see the heading and i think that's because one it doesn't have that app prop that we need for all of our layout components and also because it has this absolute prop because if we go to the v at bar api this absolute prop will apply absolute positioning to the component so let's replace that prop with the app prop and save that and we can now see our page content again um this vap bar has this shrink on scroll prop which will cause this header to shrink when we scroll down but i want it to stay nice and tall so i'm going to remove that prop and also remove this scroll target prop save that and our app bar is now gone small again so i'm gonna jump back to the api and scroll down and we have this prominent prop which increases the height of the toolbar content to 128 pixels so i'm going to add this prop to it prominent save that and it's now nice and tall again when we reload the page we can briefly see this kind of beige color in the background and that's because of this color prop we have on the app bar so let's change it to our primary color which is a nice blue color and we can set it to our primary color by just changing this to primary save that and that looks a bit better when it reloads this image in the app bar which is coming from this source prop on the v bar component is currently randomized every time we reload the page let's change this to a permanent image which is always displayed so i'm going to go to a site called pixabay.com and search for mountains scroll down and this looks pretty nice so i'm going to click on that click on download i'm going to drag this into our public folder because any files in here will be available at the root of our app so i'm just going to rename that file to just mountains dot jpeg jump back to app.view and this source prop on the v app bar i'm just going to change this to mountains.jpg save that and we now see that image in the header instead let's change this title here and that's in this v toolbar title component so i'll change that to futify to do um this menu button here which is this v bar nav icon component is no longer working because remember in our old app bar this v bar nav icon had a click handler on it which was toggling this draw property thus toggling the navigation draw on the page so let's just put that click handler back in so we just want to add at click equals and we just want to set draw equal to the opposite of draw so i'll save that and let's see if that's now working and yep that's now working let's start working on our to-do page so we're going to need a list of tasks so i'm going to jump to the beautify site go to ui components and lists and i'd like our list items to have check boxes so let's see if we can find something like that and this looks pretty good these items here so i'm going to click on view source and try and find that bit in the code and it's this v list we want here so i'm going to copy this the list component and jump to our to do page source views to do dot view and we'll paste this over this h1 that's on our page currently and save that um we don't need this subheading thing here which is this v sub header component so i'll get rid of that and i assume we can also get rid of this subheader prop as well and i'd like our tasks to stretch all the way across the width of the app so i'm going to get rid of this padding class that we added to this parent div save that and i don't think we need this vlist item group component so i think this is for forms and stuff like that where you have multiple options so let's get rid of that component and get rid of the closing tag as well i'll just nudge all the vlist items back and i'm just going to remove all but the first vlist item so get rid of all the others um we don't need two lines on our list items we just need one line for the task name so i'm going to get rid of this vlist item subtitle component and then i guess we can also get rid of this to live prop and save that and i quite like the look of this now so let's change this notifications text to the name of a task so let's call it wake up save that let's add a data property where we can store all of our tasks data so i'm going to jump down to the script section and add a data method that returns an object and we'll create an array called tasks and we'll create an object for each task and we're going to need some kind of unique id for each task so we'll add a property called id set the first one to one and we're going to need a title as well so i'll set this to wake up and i'll just duplicate this a couple of times and i'll replace these numbers with numbers from one to three and i'll change the title of the second task to get bananas and change the title of the third task to eat bananas save that uh we want to spit these out on the page so i'm going to add a v4 loop to this vlist item so we want to do v4 task in tasks to loop through this tasks array and we see red squiggly lines here that's because whenever we use a v4 we need to use a key prop as well and set that to some kind of unique identifier so we'll add a key prop and just set that to task.id these ids we've added here and i'll save that and we can now see three tasks on the page but we're not spitting out our title so let's replace this text wake up with double curly braces and task dot title and we can now see our three tasks on the page now i'd like to add a divider between each item like a little line and if we jump to the beautify site and components and dividers then we have this divider component that we can use so i'm going to copy that and i don't think we can just paste this v divider component inside the v list item although let's just give that a try save that and that's not work so that needs to be outside of the vlist item but our v4 loop is on this vlist item with a v4 loop we can only display one element or one component for each iteration of the for loop so i'm just going to get rid of that v divider put in there what we might need to do is add a parent component we could just use a div and place our v list item inside that div and then we can move the v4 loop to the div and the key prop as well so i'll move this up to the div and hopefully we can now paste this v divider component after this v list item so i'll paste that here and save that and we can now see a divider between each item and we seem to have a space above this first item so i'm just going to inspect this list and it looks like we've got a bit of padding at the top there so i'm just going to add one of beautify's padding classes to this v list i'll just add p for padding t for top dash 0 for zero padding and it's got rid of that gap at the top if you found this video useful so far make sure you smash the like button and leave a comment below telling me which app you'd like to see me make with viewtify let's have the ability to mark our tasks as done when we click on them so we're going to need a data property for each task to determine whether the task is done or not so i'm going to add a new property to each of our tasks in the task array called done we'll set these to false initially and save that and if we look at this v checkbox component which is our checkbox here and it has this input value prop and this will determine whether or not this checkbox is checked depending on whether what we pass in here is true or false so we could just pass this done property in there so i'll change this to task.done and save that and so now hopefully if we set one of our tasks done properties to true then we should see this checkbox checked which we do and i guess we don't need to pass this active variable into this slot anymore so i'm just going to remove this prop value on the equal symbol and i'm just going to change this second task back to false this done property and so when we click these tasks we want to toggle this done property so if it's false we want to set it to true and if it's true we want to set it to false so let's add a click handler to each of our list items so we'll add a click and we'll fire a method called done task and we'll pass in the task id so past task.id into there and we'll set up this method so we need to add a methods object and add this donetask method which is expecting an id and i'll just log out the id for now to make sure that's working so if we click on a task here we see id1 being logged out or id2 if it's the second task so when this method is fired we want to grab the correct task from this tasks array based on the id so we can use a filter to do this so we'll set up a variable for the task that we're going to grab i'll just call this task and then we'll use a filter on this tasks array so i'm going to do this dot tasks dot filter and this filter method is going to iterate through each of these tasks in the array so first we need a placeholder for the current task that it's looking at so we'll just call that task and then we need a method with the condition that we're looking for and the condition that we're looking for is that the task id is equal to the id that we're passing in to this done task method so what we can do is task.id is equal to id so now that we have the task we just want to set the done property to the opposite itself so we can just do task.done equals the opposite of task.done so i'll save that i'll click on a task and that's not working and that's because this filter will actually return an array of objects not just the single object of the task so we need to actually just grab the first item of the array by adding square brackets and zero at the end so i'll save that and click on a task and that's working we can now see the done status being toggled and we can see that in the view as well with these check boxes let's also change the background color on the task when it is marked as done and if we go to the beautify site and styles and animations and colors then we have a bunch of different color classes that we can use so if we want to use this red color then we just add a class of red and if we want to lighten that red color we can add an additional class such as lighten dash 5 or lighten dash 4. so let's try this blue color so we're going to conditionally add this class blue to the vlist item component but only if the task is done so we'll bind to the class attribute we'll add a class of blue and the condition is task.done so if the done property for the current task is true then we're going to add this class so i'll save that and click on a task and that's working but this blue looks a bit dark so let's lighten it a bit so i want it to be quite light like this so let's try this lighten dash 5 class so we'll also conditionally add that class as well if the task is done so lighten five save that and that's looking pretty good now i think and it'd be good if we could also strike through this text when a task is done so i'm gonna jump to the beautify site and go to text and typography and jump down to text decoration and we can see some line through text here we can apply this style by just using this text decoration line through class so i'm just going to copy that class and we just want to add that class to this title which is this vlist item title component i'm just going to break this component up onto multiple lines we'll conditionally bind to the class attribute again and this time we're going to add the class that we just copied text decoration line through but only if task.done is true so save that and click on the task and we now see that our done tasks are crossed out let's have the ability to delete a task so we're going to need some kind of button over on the right hand side of each task that we can click to delete that task so i'm going to jump to the beautify site go to ui components and lists and let's see if we can find a list item with an icon over on the right okay this looks pretty good these list items have this information icon over on the right so let's click on view source and try and find that information icon button which is here so it looks like we just need to add this vlist item action component with a v button component and a v icon component so i'm just going to copy this code and we'll paste it inside our vlist item at the bottom of that i would say and we'll just indent that and save it we're not seeing that so maybe it needs to be inside this default slot here so i'm going to move that up and save that and we now see that information button but we want a delete button so i'm going to jump to the material design icons page and search for delete this will do this little bin icon so we just need to use the name delete or mdi delete so let's change this mdi information icon to mdi delete save that and we now see a delete button and i'm also going to change the color to our primary color instead of gray and that looks pretty good now so let's add a click handler to this v button i'll just split the attributes and add a click handler and we already have a click handler on our vlist item components and we don't want that to be triggered when we click on this delete button which is a child element of that so to stop it from triggering the click on that parent component we can just add a dot stop modifier to this click handler let's trigger a method called delete task and we'll pass in the task id and we'll create that method so delete task this is going to expect an id so we want to remove the task which has the id that we're passing in here from this tasks array and again we can do that with a filter so what i'm going to do is use a filter to grab only the tasks from this array which don't have the id that we're passing in here so what i'm going to do is this dot tasks equals this.tasks.filter pass in a placeholder we'll just call that task and we only want to return the tasks where the id is not equal to the id we're passing into this method here so what we can do is task.id is not equal to id so let's save that see if it works i'll click on the delete button and that's now working this app won't be much fun if we can't actually add a task so let's add a text field where we can type the name of a task and a button that we can click to actually add a new task to our list so i'll jump to the beautify site ui components form inputs and controls and then text fields i'm going to look for a text field which has a button on the side that we can click so i'm going to jump down to icons and i'd like something like this one here with a button inside the text field so i think this will be the second from the bottom in the source code so i'll click view source and see if i can find that one i think it's this one here so i'm going to copy that let's just paste it above our v list just collapse that for now and paste that here at the top of this home div and save that and we could do with a bit of padding around this field so i'm gonna add a padding class to it so class p a for padding all around dash now let's try two maybe a little bit more let's try three and that looks better and let's change this label that says append to add task uh let's change this icon to some sort of ad icon so i'll jump to the material icons page search for add and this one looks pretty good so we just need to use the name plus so this append icon prop we're just going to change that to mdi dash plus save that and we have quite a big space at the bottom of this field and that space is reserved for hints and validation messages and stuff and we're not going to need that space and there is a prop we can use to get rid of that so i'm going to jump back to the text field page jump to api click through to the api page i'll scroll down and we have this high details prop which hides hint and validation errors so i'm going to add that to this text field component hide details and save that and that extra space now disappears and it'd be good if we could easily clear this field by displaying a little cross icon here or something which you often see in fields and there is a prop we can add which is the clearable prop add input clear functionality so let's add that prop as well so clearable save that if we type now we see this little x which we can click to clear the field and now let's add a new data property to store our new task title and bind it to this text field so i'm going to add a v model to this text field and we'll call it new task title and we'll add that to our data as well so i'll just add that here new task title we'll set that to an empty string actually we'll just type something in there just to make sure it's binding correctly and yeah we can see hello in the text field so i'll set that back to an empty string and we need to add a click handler to this plus button and we don't have direct access to that button here it's being added with this append icon prop but if we jump to the api page for the text field and if we jump down to events then we have this click append event that we can add which is emitted when the appended icon is clicked so at click colon append and let's trigger a method called add task uh we need to create this method actually i'll put that at the top add task and for now i'm just going to log out add task save that so if we click this button we should see add task logged out which we do and it'd be also good if this method was fired when we hit enter as well so i'm going to jump back up to this text field and we'll add a key up event so that's key up and we'll add a dot enter modifier so this will be triggered whenever we hit enter when we're in that field and we'll also just fire the same method add task let's make sure that's working so if i hit enter in this field yeah we see add tasks being logged out so let's work on our task method so what we want to do in this method is set up an object much like this one with a random id and the title which is going to be grabbed from this new task title property a done property as well and then just push this object to this tasks array where we should then see it on the page so let's first just set up our new task object so i'll just do let new task equals i'm going to need an id property and to make sure this id is unique we could just use the current date timestamp so for our id we could just do date dot now and then we're going to need a title property which we're going to grab from this new task title property which is bound to this text field so for this we can just do this dot new task title and then we're also going to need a dom property which should be set to false initially so this is our new task object setup and now we just want to push it to this tasks array so now we can just do this.tasks dot push new task so let's save that and see if it's working so let's add a new task so poo bananas and it's working it's adding it to our page and we can still see what we've just typed in this field so let's also clear this new task title property thus clearing the field so we can just do this dot new task title equals empty string save that let's try that again two bananas and yeah now clears the field uh let's just comment out all the items in our tasks array here i'll just make sure our app is working from scratch i'll just reload it uh let's see if we can add some tasks so wake up get bananas eat bananas bananas see doctor about poo bananas so we can add tasks and we can mark them as done and we can delete them as well if you want to learn more about beautify and its components by adding a load of functionality to this app then check out the full course at danny's dot link slash beautify in this course we're going to add this no tasks icon and message which will be displayed when there are no tasks and this will disappear when there are tasks we're also going to add these notifications that you can see at the bottom using a snapbar component and these will be displayed whenever we add edit or delete a task we're going to replace our delete button with a menu with four different options and if we click on edit then we can edit the name of the task with this dialog component which appears or if we click on the due date option we can see a date picker component and we can choose a due date for the task and once selected this will be added to the side of the task there and if we choose the delete option we now see a dialog making sure that we really want to delete the task before it's actually deleted and if we choose the saw option then we see these drag handles appear and we can actually reorder our tasks with drag and drop we're also going to pimp out the draw by adding an image an avatar a name and a username and we're going to pimp out our header too by moving our task field into it adding this live date and time component and also adding this animated expanding search field that we can use to filter our tasks we're also going to add view x to our app i'm going to move all of our core data and logic into a view x store to make our app easier to manage so we'll be adding some state mutations actions and getters and we're also going to break our app up into a bunch of different child components to again make our app easier to manage and we're also going to make the data of our app persist in the user's browser in an indexeddb database so you can see an indexeddb database here with all of the data for our tasks i'm going to be adding this with a package called localbase this means that even if we close the browser and reopen it or if we reload the app then all of our data is maintained and after we finish testing and fixing our app on real ios and android devices we're going to build this sucker for production and deploy it to netlify you can also of course get the finished source code for the app and if there's anything you found confusing in this video then chances are it will be explained in the full course because i did chop quite a lot of stuff out for this youtube video so if that sounds interesting go to danny's dot link slash beautify or click the link at the top of the description you

Channel: Make Apps with Danny

Views: 61,197

Rating: 4.9313307 out of 5

Keywords: vuetify, vuetify crash course, vuetify layout, vuetify tutorial, create an app, create an app with javascript, vue, vue js, vue.js, vuetify app, vuetify background image, vuetify basics, vuetify crud, vuetify course, vuetify drawer, vuetify design, vuetify example, vuetify full project, vuetify header, vuetify icons, vuetify js, vuetify js tutorial, vuetify mobile responsive, vuetify mobile app, vuetify quasar, vuetify route, vuetify router, vuetify responsive design

Id: CjXgoYo86yY

Length: 38min 54sec (2334 seconds)

Published: Wed Oct 21 2020