Vuetify Introduction

Excellent 32 part YouTube tutorial on Vuetify

Link: https://www.youtube.com/playlist?list=PL4cUxeGkcC9g0MQZfHwKcuB0Yswgb3gA5

  1. What is Vuetify
  2. Setting Up Vuetify
  3. Vuetify Basics
  4. Text & Colours
  5. Button & Icons
  6. Breakpoints & Visibility
  7. Toolbars
  8. Navigation Drawers
  9. Themes
  10. Lists
  11. Adding Routes
  12. Padding & Margin
  13. The Grid System (part 1)
  14. Grid System (part 2)
  15. Dummy Project Data
  16. Chips
  17. Sorting Projects
  18. Tooltips
  19. Cards
  20. Avatars
  21. Expansion Panels
  22. Menus
  23. Popups (dialogs)
  24. Form Basics
  25. Datepickers
  26. Simple Form Validation
  27. Firestore Databases
  28. Adding Firestore Data
  29. Button Loaders
  30. Snackbars
  31. Firestore Real-time Listeners
  32. What Next?

Vuetify Info

Vue

Vuetify

Vuetify is a Material Design Component Framework for Vue.js.

The Net Ninja offers an excellent free 32 part course on YouTube about learning Vuetify. Course files can also be downloaded.

TypeScript

References

$ vue create my-app
> Manually select features
* TypeScript
$ cd my-app
$ vue add vuetify

Put the following type hint in your app’s tsconfig

"compilerOptions": {
    "types": ["vuetify"],
$ npm run build

Fix compiler warnings. This will probably be adding semi-colons to main.ts and vuetify.ts

$ npm run serve