About Vue
Vue is a progressive JavaScript framework for building user interfaces and
single-page applications. It is known for a gentle learning curve: you can add it
to one corner of an existing page, or grow the same ideas into a full app. This
course starts with Introduction to Vue (what it is and how it
compares to other frameworks) and Installation & Setup (the
CDN, create-vue, and Vite).
Next comes Template Syntax & Directives and
Reactivity & Data Binding, followed by
Events, Methods & Forms. From there,
Components & Props covers splitting an interface into reusable
pieces, while Computed, Watchers & Lifecycle covers derived
values and reacting to change.
Composition API covers the modern way to organize component logic.
Vue Router covers navigating between pages in a single-page app, and
State Management with Pinia covers sharing data across components:
the natural next step once single components feel routine.
Content
10 modules
01
Introduction to Vue
What Vue is, where it fits among front-end frameworks, and why its component model is so approachable.
Progressive FrameworkComponentsVue vs Other Frameworks
02
Installation & Setup
Trying Vue from a CDN, scaffolding a project with create-vue and Vite, and tour of the project structure.
CDNcreate-vue & ViteProject Structure
03
Template Syntax & Directives
Rendering data with interpolation and controlling the page with v-if, v-for, v-bind, and other directives.
Interpolationv-if & v-forv-bind
04
Reactivity & Data Binding
How Vue tracks changes with ref and reactive, and keeps the page in sync with your data.
refreactiveData Binding
05
Events, Methods & Forms
Handling user input with v-on, writing methods, and building forms with v-model.
v-onMethodsv-model
06
Components & Props
Splitting an interface into reusable single-file components, passing data with props, and sending events back up.
Single-File ComponentsPropsEmits
07
Computed, Watchers & Lifecycle
Derived values with computed properties, reacting to changes with watchers, and running code with lifecycle hooks.
computedwatchonMounted
08
Composition API
Organizing component logic with script setup, ref and reactive state, and reusable composables.
script setupComposablesOptions API vs Composition API
09
Vue Router
Building multi-page single-page apps with routes, links, route params, and navigation.
RoutesRouterLinkRoute Params
10
State Management with Pinia
Sharing state across components with Pinia stores, getters, and actions.
StoresGettersActions
Projects
5 builds
Build a Random User Generator
Add Vue to a plain HTML page from the CDN and fetch a random user from an API to see data binding and methods in action.
Build a Task Tracker
Create a header, tasks list, and add-task form from components, using props, emitted events, and v-model.
Connect the Task Tracker to a Backend and Add Routes
Replace hardcoded data with a mock REST API using JSON Server, then add Vue Router to split the app into pages.
Build a Product Cart App
Build a small store with a product list and a cart, then rebuild it with Vue CLI using reusable components, a top nav, and a sidebar.
Build a Job Listings App
Build a job board from components with Vue Router, data fetched from JSON Server, and forms for adding, editing, and deleting listings.
What You Can Do After This Course
By the end of the curriculum you'll have worked through 5 hands-on projects and
covered the core of what a developer role expects from someone who "knows Vue."
Concretely, you'll be able to:
Write clean Vue components: comfortable with single-file components, template syntax, and the conventions that keep Vue code readable.
Manage reactive state: use ref, reactive, computed, and watchers so the page always matches your data.
Handle input and events: respond to clicks and form input with v-on and v-model without off-by-one surprises.
Design with components: split an interface into reusable parts and pass data down with props and back up with events.
Organize logic with the Composition API: write script setup components and extract reusable composables.
Build multi-page apps: set up routes and navigation with Vue Router, and load data from an API.
Share state and ship it: manage global state with Pinia and build a project for production.