Vue.js Fundamentals

Vue is one of the most approachable ways to build user interfaces on the web. You write plain HTML with a few extra attributes, keep your state in ordinary JavaScript values, and Vue keeps the page in sync as those values change.

This course builds real Vue 3 apps from scratch, one concept at a time, using the Composition API with <script setup> throughout. It ends with Senpai, an anime explorer that searches a live API, filters the results, gives every show its own page, and keeps a watchlist shared across the app.

What you'll learn

• Single-file components: template, script, and style in one file
• Template syntax: v-bind, v-if, v-for, and class bindings
• Reactivity with ref, computed, and reactive
• Composing a UI with props, events, and slots
• Building forms with v-model, modifiers, and validation
• Lifecycle hooks, fetching data, and handling loading and error states
• Reusing logic with composables and sharing state with provide/inject
• Client-side routing with Vue Router, including dynamic detail pages

Prerequisites

• Finished JavaScript Basics (opens in a new tab) and Intermediate JavaScript (opens in a new tab)
• Comfortable with functions, array methods, and fetch

No prior framework experience is assumed, and nothing needs installing. Every lesson runs a live preview of your app right in the browser.