Introduction & Setup
  • What is Vue?
  • New Features in Vue 3
  • What You Should Already Know
  • Environment Setup
  • Course Files
Vue Basics
  • How to use Vue (using the CDN)
  • Creating a Vue App
  • Templates & Data
  • Methods & Click Events
  • Conditional Rendering
  • Other Mouse Events
  • Outputting Lists (v-for)
  • Attribute Binding
  • Dynamic Classes
  • CHALLENGE - Add to Favs
  • SOLUTION - Add to Favs
  • Computed Properties
The Vue CLI (for Bigger Projects)
  • Why Use the Vue CLI?
  • How to Use the Vue CLI
  • New Project Walkthrough
  • Vue Files & Templates
  • Template Refs
  • Multiple Components
  • Component Styles & Global Styles
  • Passing Data with Props
  • Emitting Custom Events
  • Click Event Modifiers
  • Slots
  • CHALLENGE - Reusing Components
  • Using Teleport
PROJECT BUILD - Reaction Timer
  • Project 1 Preview & Setup
  • Starting a New Game
  • Component Lifecycle Hooks
  • Creating the Reaction Timer
  • Emitting Custom Events with Data
  • CHALLENGE - Showing a Results Component
  • Finishing Touches
Forms & Data Binding
  • Forms Intro & Setup
  • Two-way Data Binding
  • Select Fields
  • Checkboxes
  • Keyboard Events & Modifiers
  • CHALLENGE - Deleting Skills
  • Submitting the Form
Vue Router Basics
  • Why Use the Vue Router?
  • Router Setup for New Projects
  • Router Links
  • Folder Structure
  • Route Parameters
  • Dynamic Links
  • 404 Pages & Redirects
  • Programmatic Navigation
  • Lazy Loading Components
Fetching Data
  • Using JSON Server
  • Where to Fetch Data
  • Conditionally Showing Data
PROJECT BUILD - Simple Project Planner
  • Project 2 Preview & Setup
  • Home View & Data
  • Single Project Template
  • Using Material Icons
  • Deleting Projects
  • Completing Projects
  • New Project Form
  • Adding New Projects
  • Navbar Component
  • Edit Project Route
  • CHALLENGE - Updating Projects
  • Creating a Filter Nav
  • CHALLENGE - Showing Filtered Projects
The Composition API
  • Drawbacks of the Options API
  • Composition API Basics
  • Template Refs in the Setup Function
  • Using Refs for Reactivity
  • Refs vs Reactive
  • Computed Values in the Setup Function
  • Using watch and watchEffect
  • Using Props in the Setup Function
  • Lifecycle Hooks
Async Code (& the Composition API)
  • Fetching Data in the Setup Function
  • Reusable Composition Functions (Composables)
  • Creating Another Composable
  • Creating a Loading Spinner
  • Making a Web Form
  • CHALLENGE - Making a POST Request
  • Future Async Lesson & Extra Styling
Routing (with the Composition API)
  • Routing Recap & Navbar
  • Using useRouter
  • Using useRoute
  • CHALLENGE - Creating a Tag Route