How to Create 'Vuetiful' Data-Driven User Interfaces

on YouTube ↗36m

" summary

Shows how Vue loads and wires components at runtime to turn JSON schemas into working UIs: dynamic mounting with <component :is="...">, property forwarding with v-bind, two‑way edits via v-model, and state-driven layouts using Vuex. Demonstrates a small form builder that swaps inputs, changes field types, and updates app state live, uses Buefy for wrapped widgets, and links to slides and source so the exact code and demo are available.

AI-written summary · about

" chapters (8)

1. 0:00Start
2. 0:35VUETIFUL DATA-DRIVEN USER INTERFACES
3. 1:56DATA DRIVEN UI WHAT DOES IT MEAN
4. 7:15THE BASICS COMPONENT
5. 14:31COMPONENTS PROPS AND EVENTS
6. 21:50PUTTING IT TOGETHER FORMS
7. 25:24WHAT ABOUT V-IF
8. 29:40LETS SEE IT DEMO TIME

" related talks

• 40mSimplicity is VuetifulMichael Bennett · Spotlight Vue.js FITC 2018
• 50mVue.js - Power and FlexibilityPratik Patel · Jfokus 2019
• 29mBuild highly dynamic apps with Vue.jsNorbert Frank · RuhrJS 2018
• 38mAn Introduction to the Vue EcosystemHassan Djirdeh · Web Unleashed 2019
• 24mVue js in Practice: Hybridizing Objects and FunctionsBetsy Haibel · NationJS 2017
• 26mPhenomenal Design Patterns In VueJacob Schatz · VueConf US 2019
• 13mUsing and creating Vue directivesKyle Waters · UtahJS Conf 2023
• 25mPhenomenal design patterns in Vue using Vuex with SpidersJacob Schatz · Vue.js Amsterdam 2019