• No products in the cart.

ratings 

Vuetify is a material design components framework for Vue.js that aims to provide all the tools necessary to create beautiful …

UDesign Membership
Course Access

Unlimited Duration

Students Enrolled

2075

Total Video Time

4 hours, 33 minutes

Posted by
Vuetify is a material design components framework for Vue.js that aims to provide all the tools necessary to create beautiful content-rich applications. Vue.js is an open-source tool and progressive Js framework used to build user interfaces and single-page applications. Use Vuetify to create content-rich app by taking this course. Prerequisite. No design skill is required; however, a fundamental knowledge of JavaScript is necessary. What does this course provide? This course teaches:
  •   Vuetify and every tool needed to start using the framework (editor, executable file Node.js & Vue cli).
  •   Creating a Vue project & add Vuetify.
  •   Vue dev tools installation on chrome.
  •   Making a wire-frame and setting up the drawer.
  •   Creating tasks, managing tasks, deleting the task.
  •   Working with Vuex.
  •   Creating and working with child components.
  •   Working with dialog.
  •   Form and field validation.
  •   Usage of date and time.
  •   Vuex state creation and manipulation.
  •   Adding and working with images.
  •   Using environment variable in components.
  •   Installation of Vue draggable.
  •   Building, testing, and debugging across multiple devices.
  •   Setting up the local and remote repository.
  •   Deploy apps to Netlify.
  Who is this course for? This course is a must-take for anyone who wants to learn app design using JS framework.
Profile Photo
Hoz map
5 5
29085

Students

About Instructor

Course Currilcum

  • Welcome! 00:01:00
  • What is Vuetify? 00:04:00
  • Editor & Software Setup 00:05:00
  • Install Node.js & Vue CLI 00:00:00
  • Create a Vue Project & Add Vuetify 00:02:00
  • Folder & File Structure 00:03:00
  • Install Vue Devtools on Chrome 00:01:00
  • Vue.js Basics 00:02:00
  • Clean up the Project 00:00:00
  • Start with a Wireframe 00:01:00
  • Setup the Drawer 00:03:00
  • Setup Pages & Routes 00:03:00
  • Get Pages Ready 00:02:00
  • Header Styles 00:02:00
  • Replace Image & Title 00:02:00
  • Create a List of Tasks 00:02:00
  • Mark Task as Done 00:06:00
  • Delete Task 00:02:00
  • Add Task 00:06:00
  • No Tasks Fallback 00:05:00
  • What is Vuex? 00:06:00
  • Move Tasks into Vuex Store 00:01:00
  • Move addTask() Method into Vuex Store 00:04:00
  • Move doneTask() Method into Vuex Store 00:01:00
  • Move deleteTask() Method into Vuex Store 00:01:00
  • Child Components? 00:00:00
  • Create Add Task Field Child Component 00:04:00
  • Create Task List Child Component 00:01:00
  • Create Task Child Component 00:03:00
  • Create “No Tasks” Child Component 00:02:00
  • Create a Snackbar Component 00:04:00
  • Show Snackbar when Task Added 00:04:00
  • Show Snackbar when Task Deleted 00:01:00
  • Make the Snackbar Text Dynamic 00:02:00
  • Allow Snackbars to be Shown in Quick Succession 00:03:00
  • Allow Snackbar to be Dismissed 00:01:00
  • Show a “Prompt to Delete” Dialog 00:03:00
  • Customize Dialog and Show on Delete Click 00:02:00
  • Delete the Task when “Yes” Button Clicked 00:02:00
  • Close the Dialog on “No” Click 00:01:00
  • Add a Task Menu 00:02:00
  • Add the Menu Items & Icons 00:02:00
  • Handle Clicks 00:02:00
  • Delete Task 00:03:00
  • Create the Dialog 00:03:00
  • Display Current Task Title in Dialog 00:01:00
  • Save the Task 00:03:00
  • Close the Dialog 00:01:00
  • Field Validation 00:04:00
  • Add Task Field Validation 00:04:00
  • Show a Snackbar 00:01:00
  • Setup the Data & Styles 00:04:00
  • Filter the Date with date-fns 00:03:00
  • Create the Dialog 00:03:00
  • Show Dialog and Select Current Date 00:02:00
  • Save Due Date & Close Dialog 00:04:00
  • Add the Search Field 00:01:00
  • Improve the Style 00:03:00
  • Close the Search Field 00:01:00
  • Open on Focus, Close on Blur 00:02:00
  • Add Animation 00:02:00
  • Only Close if Empty 00:02:00
  • Fix Header Issues 00:03:00
  • Hook it up to Vuex State 00:03:00
  • Create a Getter to Filter the Tasks 00:05:00
  • Create a Live Date & Time Component 00:03:00
  • Show the Real Date 00:02:00
  • Display Full Date & Time and Make it Live 00:02:00
  • Add an Image 00:03:00
  • Add an Avatar 00:01:00
  • Add Name & Username 00:03:00
  • Show the Drawer by Default on Tablet & Above 00:03:00
  • Set a Base Page Title 00:01:00
  • Add Page Name to Title on Route Change 00:03:00
  • Environment Variable for App Title 00:03:00
  • Use Environment Variable in HTML Page & Router 00:01:00
  • Use the Environment Variable in Our Components (1) 00:02:00
  • Use the Environment Variable in Our Components (2) 00:02:00
  • Add the Sort Handle & Setup State 00:02:00
  • Add Sort Menu Item & Done Sorting Button 00:05:00
  • Install Vue Draggable 00:03:00
  • Add Some Style 00:03:00
  • Update the Vuex State 00:04:00
  • Install Localbase 00:02:00
  • Make Add Task Persist 00:04:00
  • Get Tasks from Localbase on Load 00:03:00
  • Make Done Task Persist 00:05:00
  • Make Update Title Persist 00:02:00
  • Make Due Date Persist 00:01:00
  • Make Delete Task Persist 00:01:00
  • Introduction 00:05:00
  • Make Reordering Persist 00:05:00
  • Testing on iOS 00:04:00
  • Testing on Android 00:04:00
  • Fix the Add Task Field 00:08:00
  • Hide Add Task Field on About Page 00:02:00
  • Fix Scrolling Issues 00:06:00
  • Fix the Snackbars 00:01:00
  • Disable Sorting when Searching 00:03:00
  • Build for Production 00:01:00
  • Setup a Local Git Repository 00:02:00
  • Setup a Remote Repository on GitHub 00:01:00
  • Deploy to Netlify 00:05:00

Course Reviews

X