English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 5.5 Hours | 4.63 GB
Create a Gorgeous Todo App with Vuetify, Vue JS & Vuex – using many different Vuetify Components!
n this course you’ll learn how to use Vuetify, along with Vue JS & 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!
What you’ll 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
Table of Contents
Introduction
1 Introduction
2 What is Vuetify
3 Editor & Software Setup
Getting Started
4 Install Node.js & Vue CLI
5 Create a Vue Project & Add Vuetify
6 Folder & File Structure
7 Install Vue Devtools on Chrome
8 Vue.js Basics
9 Clean up the Project
Layout, Pages & Routes
10 Start with a Wireframe
11 Setup the Drawer
12 Setup Pages & Routes
13 Get Pages Ready
14 Header Styles
15 Replace Image & Title
16 Finished Module Code
Todo Page
17 Create a List of Tasks
18 Add a Data Property for the Tasks
19 Mark Task as Done
20 Delete Task
21 Add Task
22 No Tasks Fallback
23 Finished Module Code
Vuex
24 What is Vuex
25 Move Tasks into Vuex Store
26 Move addTask() Method into Vuex Store
27 Move doneTask() Method into Vuex Store
28 Move deleteTask() Method into Vuex Store
29 Finished Module Code
Child Components
30 Why Use Child Components
31 Create Add Task Field Child Component
32 Create Task List Child Component
33 Create Task Child Component
34 Create “No Tasks” Child Component
35 Finished Module Code
Snackbars
36 Create a Snackbar Component
37 Show Snackbar when Task Added
38 Show Snackbar when Task Deleted
39 Make the Snackbar Text Dynamic
40 Allow Snackbars to be Shown in Quick Succession
41 Allow Snackbar to be Dismissed
42 Finished Module Code
Dialogs
43 Show a “Prompt to Delete” Dialog
44 Customize Dialog and Show on Delete Click
45 Delete the Task when “Yes” Button Clicked
46 Close the Dialog on “No” Click
47 Finished Module Code
Task Menu
48 Add a Task Menu
49 Add the Menu Items & Icons
50 Handle Clicks
51 Delete Task
52 Finished Module Code
Edit Task
53 Create the Dialog
54 Display Current Task Title in Dialog
55 Save the Task
56 Close the Dialog
57 Field Validation
58 Add Task Field Validation
59 Show a Snackbar
60 Finished Module Code
Due Dates
61 Setup the Data & Styles
62 Filter the Date with date-fns
63 Create the Dialog
64 Show Dialog and Select Current Date
65 Save Due Date & Close Dialog
66 Finished Module Code
Expanding Search
67 Add the Search Field
68 Improve the Style
69 Close the Search Field
70 Open on Focus, Close on Blur
71 Add Animation
72 Only Close if Empty
73 Fix Header Issues
74 Hook it up to Vuex State
75 Create a Getter to Filter the Tasks
76 Finished Module Code
Live Date & Time
77 Create a Live Date & Time Component
78 Show the Real Date
79 Display Full Date & Time and Make it Live
80 Finished Module Code
Beautify the Drawer
81 Add an Image
82 Add an Avatar
83 Add Name & Username
84 Show the Drawer by Default on Tablet & Above
85 Finished Module Code
Dynamic Page Titles & Environment Variables
86 Set a Base Page Title
87 Add Page Name to Title on Route Change
88 Environment Variable for App Title
89 Use Environment Variable in HTML Page & Router
90 Use the Environment Variable in Our Components (1)
91 Use the Environment Variable in Our Components (2)
92 Finished Module Code
Reorder Tasks with Vue Draggable
93 Add the Sort Handle & Setup State
94 Add Sort Menu Item & Done Sorting Button
95 Install Vue Draggable
96 Add Some Style
97 Update the Vuex State
98 Finished Module Code
Persistent Data with Localbase
99 Install Localbase
100 Make Add Task Persist
101 Get Tasks from Localbase on Load
102 Make Done Task Persist
103 Make Update Title Persist
104 Make Due Date Persist
105 Make Delete Task Persist
106 Make Reordering Persist
107 Finished Module Code
Mobile, Testing & Fixing
108 Testing on iOS
109 Testing on Android
110 Fix the Add Task Field
111 Hide Add Task Field on About Page
112 Fix Scrolling Issues
113 Fix the Snackbars
114 Disable Sorting when Searching
115 Finished App Code
Deploy to Netlify
116 Build for Production
117 Setup a Local Git Repository
118 Setup a Remote Repository on GitHub
119 Deploy to Netlify
What Next
120 Bonus Lecture What Next & Learn More from Me
Resolve the captcha to access the links!