Vue.js

What you'll learn

• Explain what Vue is and write templates with interpolation, directives, conditionals and keyed lists.
• Use the reactivity system with ref, reactive, computed, watch and watchEffect.
• Build components with typed props, emits, component v-model and slots.
• Share logic with composables, lifecycle hooks and provide/inject.
• Add routing with Vue Router and shared state with Pinia, and fetch data with clear loading and error states.
• Test, optimise and ship Vue apps, and know when Nuxt and server-side rendering fit.

Syllabus

Vue Foundations

1. What Vue Is
2. Setting Up a Vue Project
3. Template Syntax

Reactivity

1. ref and reactive
2. Computed Properties
3. watch and watchEffect

Components

1. Props and Emits
2. v-model on Components
3. Slots

Composition Patterns

1. Composables
2. Lifecycle Hooks
3. provide and inject

Forms and Styling

1. Form Bindings and Validation
2. Class and Style Bindings, Scoped CSS
3. Transitions

Routing With Vue Router

1. Vue Router Basics
2. Navigation Guards and Lazy Routes
3. Nested Routes and Route Meta

State, Data and TypeScript

1. Pinia Stores
2. Fetching Data
3. TypeScript With Vue

Vue in Production

1. Testing With Vitest and Vue Test Utils
2. Performance Techniques
3. Nuxt and Server-Side Rendering
4. A Vue Release Checklist