Vuetify in practice

on YouTube ↗02h 57m

" summary

Shows how to build a three-step booking app using Vue CLI, Node and Vuetify, with concrete code for Vuetify form validation rules, a Date Range picker inside a Dialog, an autocomplete destination field, a flight list rendered with Virtual Scroller and selectable items saved by ID, plus dynamic theme switching and i18n tips. Covers practical pitfalls: Virtual Scroller performs well around 1,000 items but fails at ~10,000 and interferes with itemGroup selection, CSS overrides can break on upgrades, and recommends using custom SASS variables for safe customization.

AI-written summary · about

" chapters (15)

1. 0:00Introduction
2. 7:44Vuetify in 3 projects
3. 18:12Flight booking app
4. 23:14Project setup & deps
5. 32:05App structure & Booking
6. 40:16Stepper & forms
7. 56:30Date Range Picker
8. 1:03:05Form validation & dialogs
9. 1:18:46Flight selection & Virtual Scroller
10. 1:56:36Break
11. 2:09:15Virtual Scroller & lists
12. 2:25:37Finalizing app & data
13. 2:36:34Vuetify themes & colors
14. 2:41:20Internationalization & RTL
15. 2:48:36Q&A

" related talks

• 09mOverVue of Vuetify.jsCJ Reynolds · VueConf US 2018
• 20mVuetify 3: TitanJohn Leider · Vue.js London Live 2021
• 17mVuetify, The Path to 2.0John Leider · VueConf TO 2018
• 36mHow to Create 'Vuetiful' Data-Driven User InterfacesEvan Schultz · JSCamp 2018
• 30mVuetify 2+John Leider · Vue.js Amsterdam 2020
• 23mThe Next VuetifyJohn Leider · Vueconf.US 2023
• 20mVuetify v2+John Leider · Vueconf.US 2020
• 53mv3 - The Next Generation of VuetifyJohn Leider · Vue.js Nation 2023