Vuetify 2: Create an App with Vue JS 2 & Vuex - in 5 Hours! (Udemy.com)
Create a Gorgeous Todo App with Vuetify 2, Vue JS 2 & Vuex - using many different Vuetify Components! (Legacy Course)
Created by: Danny Connell
Last updated November 2022
What you will learn
- How to create a beautiful app with Vuetify, Vue JS & Vuex
- How to move core data & logic into a Vuex Store with State, Mutations, Actions & Getters
- How to break the app up into Child Components
- How to use many Vuetify Components such as Lists, Text Fields, Dialogs, Date Pickers, Snackbars & Menus
- How to use Vue Router & Navigation Guards
- How to make data persist in the user's browser using IndexedDB & Localbase
- How to test & debug the app on real iOS & Android devices
Quality Score
No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.
Overall Score : 92 / 100
Course Description
Note: This is a legacy course for Vuetify 2 (with Vue JS 2). Vuetify 3 (with Vue JS 3) are not covered in this course.
In this course you'll learn how to use Vuetify 2, along with Vue JS 2 & Vuex to create a gorgeous Todo app from scratch.
Vuetify is a hugely popular Vue UI Framework offering 100s of Material Design Components that can be used to create almost ANY website or app.
However, it can be difficult to get started, so in this course you'll learn how to create a beautiful, responsive app from scratch that looks great on both desktop & mobile.
You're gonna use tons of Vuetify Components such as Lists, Text Fields, Menus, Dialogs, Date Pickers, Snackbars & much more.
You'll also use Vuex to centralise the app's core data & logic, setting up State, Mutations, Actions & Getters.
You'll split your app up into Child Components, to make the project easier to manage.
In our course app, Vuetify Todo we can display a list of tasks, add tasks & mark tasks as done by tapping on them.
Each task has a Menu, with options to edit the name of a task, add due date to a task, delete a task and even an option to reorder our tasks using drag & drop.
We can even filter our tasks using an expanding search field.
You'll use Vue Router to setup Pages & Routes which can be navigated by links in the Navigation Drawer.
You're gonna store all the data in the user's browser using IndexedDB & Localbase. So even if the user closes the browser or refreshes it - all their data is maintained.
You'll test, debug & fix the app on real iOS & Android devices.
And when you're done, you'll deploy your finished app to Netlify!
Instructor Details
- 4.6 Rating
788 Reviews
Danny Connell
I spent 7 years working for various companies in the UK as a Web Developer (both front- and back-end) becoming highly skilled in HTML, CSS, JavaScript, jQuery, PHP and many more.
After becoming more interested in apps, I worked for 2 years as a Hybrid App Developer, creating cross-platform apps for the charity sector using technologies including Angular, Ionic, Vue.js and more.
I created my own successful app called Fudget (for iOS, Android, Mac & Windows) which is the highest user-rated personal finance app on iOS with over 1.5 million downloads. This eventually enabled me to leave my job and become a full-time Indie App Developer, working on my own apps.
I have a young but successful YouTube channel where I also share coding tutorials.
I'm super excited to share my knowledge on Udemy!
More courses by Danny Connell
Vue JS 3: Composition API (with Pinia, Firebase 9 & Vite) (2024)
4.4 (2,474 Reviews)
Provider: Udemy
Time: 9.2h
$79.99
Quasar V1: Cross-Platform Apps (with Vue 2, Vuex & Firebase) (2022)
4.6 (1,956 Reviews)
Provider: Udemy
Time: 15.4h
$74.99
Quasar V1: PWA (with Vue JS 2, Firebase, NodeJS & Express) (2022)
4.8 (686 Reviews)
Provider: Udemy
Time: 14.9h
$74.99
Vue 3: Create a Mobile & Desktop App (with Quasar 2 & Pinia) (2024)
4.9 (177 Reviews)
Provider: Udemy
Time: 7.6h
$79.99
Quasar V1: Weather App for Mobile, Desktop & Web (Vue JS 2) (2022)
4.5 (157 Reviews)
Provider: Udemy
Time: 1.6h
$49.99
More Vue.js courses
Curso Vue JS 2 - O Guia Completo (incl. Vue Router & Vuex) (2024)
4.7 (6,106 Reviews)
Provider: Udemy
Time: 43h
$74.99
Complete Javascript & jQuery Course with Bonus Vue JS Intro (2021)
4.7 (2,716 Reviews)
Provider: Udemy
Time: 16.9h
$74.99
Vue JS 3 & Firebase - The Full Guide [2022] (2023)
4.7 (38 Reviews)
Provider: Udemy
Time: 19.7h
$69.99
Laravel + Vue 3 + Inertia: From Zero to Production SPA (2025)
4.6 (2,488 Reviews)
Provider: Udemy
Time: 19.5h
$84.99
Quasar V1: Cross-Platform Apps (with Vue 2, Vuex & Firebase) (2022)
4.6 (1,956 Reviews)
Provider: Udemy
Time: 15.4h
$74.99
Vue JS 3 For Modern Web Development - Beginner to Advanced (2024)
4.6 (1,035 Reviews)
Provider: Udemy
Time: 9.2h
$74.99
Reviews
By Nicholas Sidaris on 4/3/2023
My work uses Vue and Vuetify and this course has been great at teaching applicable knowledge in a reasonable amount of time, most other tutorials Iv'e tried have been too slow. This is great for someone who has development experience and needs quick, applicable knowledge. Most of our apps are Vuetify 2 based so even though it's not the latest version it's still helpful. I'll definitely be recommending this as a resource for my team. Please consider making a vuetify 3 course like this in the future!
By Coach Sean on 4/7/2022
Is great for a demo of how to do. If you are looking to actually learn how to develop there is little to no explanation on what or why to the tasks being done. Was not an over stretch for the price point, probably find something similar and just as informative on YouTube. Hopefully there is a more comprehensive option when Vuetify 3 is out of beta in May
By Benny Warlick on 11/22/2021
This is a great class, well structured. Danny's teaching is very straightforward and to-the-point, and avoids the annoying enthusiasm of many other instructors on Udemy ("so excited to see you in the next segment!!!"). Every so often Danny throws in a curveball and you ask yourself, wait what did he just say?
By Oliver-James Massam on 11/16/2021
Very good course covering the topics very well and clearly. Only lost half a star because I came in expecting to learn Vue 3 but I realised the framework Vuetify is only in alpha for Vue 3 so instead Vue 2 was used. Concepts and methodologies do carry over quite well though but it just meant I had to do a bit more side reading than usual.
By Michael Owuor on 9/18/2021
This is a good course. The lessons are short and to the point and at the end of each section you can tell if you either have got it or need to review something. You can also see that the instructor knows his stuff. While debugging, he uses the tools anyone would first call on e.g. Chrome debugger etc. I like this. It is a sign of someone who has earned is experience through trial. Thanks, Danny. I have learnt a lot from you.
By A Z on 7/7/2021
So far so good at this point in half way there ! I like this course , the only reason it didn't got 5 starts from me was because I was hoping to get an answers in the Q&A and at the moment when I'm writing this comment I still didn't gotten it yet(A · Lecture 27 · 19 days ago) ,also its not the end of the course but I'm still hoping at some point will get some better explanation on how it works behind the scene (not 100% critical just nice to know how it works ) , Beside this I love this course!!! its straight to the point not wasting time ! , thanks !
By Michael Wilson on 2/5/2021
I have 120 courses I own on Udemy. It is a combination of programming, art, music, writing, project management, and computer architecture courses. Why is that important. Danny's course on Vue JS is the first one I was excited enough to want to complete it. What does that mean, it demonstrates he is competent, his course contains excellent learning opportunities, and his communication as an instructor is understandable. There are many good instructors in the areas of programming and development on Udemy, but Danny demonstrates a couple of things very well. - The opportunity to start creating something from the preliminary stages of the course that builds until you have a complete app that is feature reach and demonstrates great user experience techniques. - The examples he uses and what he tells you to do works. There was only one place I had to investigate an issue with an external library he didn't write that had published a bug in a later version I was using. Nevertheless, I was able to solve it by using an alternate library and I posted the solution in the Q&A to share with anyone else that had the same issue. - He responded with detail to my questions I had one about how to perform something beyond what the course had taught to provide a more dynamic user experience in one area of the app. - His course is focused on what you need, not a lot of extra fluff or filler information, I appreciate that as all the filler stuff and fluff is interesting sometimes but for me, it's like falling down the rabbit hole. Sometimes the way back is not always easy to find. I would highly recommend this course for anyone wanting to get a solid understanding of Vue JS, Vuetify CSS, and Localbase which is a persistence browser based IndexDB for storing and retrieving your data for an app. I have signed up to take another of his courses because this one was so good. My motivation for this course if the following: I am a 35-year Information Technology Professional, retired due to the current economic crisis. I needed to find something to maintain my sanity so I decided to take some ideas I've had from such a lengthy career in IT and create some Web / Mobile apps to see where I can go with them. It has been a long journey that is not done yet. I have learned Python, C#, JavaScript, HTML, CSS, and attempted many frameworks. Although I have other courses by other instructors on Vue JS, this one allowed me to learn what I needed to know to attempt the creation of my first idea for an app. Well done, Danny...
By Vladislav Evtushenko on 1/31/2021
It is good and up to date. I recommend to buy it as starting point, which I was looking for. However I would like to see each step`s code to be on github. Also I personally like some extras: more details about js along the way (what is destruction, why do we use call and not lambdas, ...) . That is how I learned C# by reading the ASP .NET book.
By Roman Matuła on 12/23/2020
Great Course!!! The application is built step by step, everything is clearly presented. Many references to documentation, it allows you to learn how to use it efficiently. I like the attention to detail to eliminate all possible errors in the application. End of the course, performed by Danny :) Priceless :)
By Julio Rodas on 11/14/2020
Si, tiene un estilo de buscar en la documentación, lo necesario, pero explica bastante bien el funcionamiento de varias partes del framework. This course focuses in how you can learn vuetify by searching on the documentation, and that's the way to go, since you are not going to remember everything in one shot, so you have to know where and how to find what you need. Danny explains with detail how many parts of the framework works, and it's really good to start from scratch :)







![Vue JS 3 & Firebase - The Full Guide [2022]](/programming/vue-js/images/4530334_c8de_4.jpg?v=1789444064)


