Building Vue-tiful, Data-Driven UIs

This workshop will teach you how to how to use <component :is="Awesome"/> to unlock the potential in Vue, and build applications that can easily handle the dynamic nature of the web.

If you’re currently creating applications that need to generate UI’s based off of dynamic changing data, such as a headless CMS response, user configuration, or a schema that changes over time - you might be frustrated by building screens for the unknown.

When all you have is JSON - how can you transform that into a vuetiful user experience? Evan Schultz, Technical Director and Coach at Rangle.io, will lead attendees through the process of building a form generator, demonstrating how Vue makes these challenges easy to tackle. Attendees will make use of Vue’s <component :is to build applications based on a JSON schema.

Prerequisits

People should be able to work with stackblitz + starter repo or have downloaded the starter repo and have it running in their editor of choice

Tooling

• The recommended IDE setup is VSCode + Volar.
• node >= 12.0.0 installed
• optional / Alternative: Browser that supports stack blitz

Knowledge

• Basic understanding of JavaScript
• Previous experience with Vue recommended but not required
• Starter repo will be provided to code along with.
• Recommended Reading
• Vue Getting Started - note: links may need to be updated - pointing to their staging docs right now
• Intro - docs
• Quick Start - docs
• Vue Docs - essential docs
• understanding the template syntax - docs
• component basics - docs

You'll learn:

• What is <component :is>
• Handling Props and Events with dynamic components
• v-model for custom components
• Handling v-model with dynamic components