Advanced Component Patterns in Vue.js Workshop

Project setup

yarn

Note: this repository only works with yarn because it uses yarn workspaces. If you don't have it, install it with npm -g install yarn.

Run a task

yarn task1

Task list

1. Warm-up — props & events
2. Extracting common logic from components — mixins
3. Components with v-model
4. Modal component — slots
5. PageLayout component — named slots & lazy-loading
6. Customizing children UI — scoped slots
7. ThemeProvider component — provide / inject
8. Wrapping an [insert library here] component
9. Tabs & Tab components