Vue

Lessons

1. 1Hello, Vue!You will write your first Single File Component, a .vue file that keeps a component's template, script and styles together. Every Vue app is built from these.
2. 2Reactivity: ref & reactiveYou will learn how Vue tracks data with `ref` and `reactive` and updates the page when it changes. Knowing when to use each avoids the most common Vue mistakes.
3. 3Template DirectivesYou will learn the directives (`v-if`, `v-for`, `v-bind`, `v-on`, `v-model`) that connect your data to the page. They are special attributes that start with `v-`.
4. 4Components & PropsYou will learn how components pass data down with props and send messages up with emits. This one-way flow makes it clear where data comes from.
5. 5ComposablesYou will learn how to write composables: plain functions that use the Composition API to share reactive logic between components. They are Vue's equivalent of React's custom hooks.
6. 6Mini Project: Todo App with PiniaYou will build a todo app with Vue 3 and Pinia, Vue's official state management library. It brings together components, reactivity and shared state.
7. 7Vue CheatsheetComposition API, template syntax, and reactivity on one page.

Install it on your own computer

Install Node.js, then create a Vue project with Vite, which is the official setup. You can also add Vue to an existing page from a CDN. You do not need this to follow the lessons: the examples run in your browser.

# Create a Vite-powered Vue app:
npm create vite@latest my-app -- --template vue
cd my-app
npm install
npm run dev

# With TypeScript:
npm create vite@latest my-app -- --template vue-ts

What people build with Vue

Learn the basics first, then pick up these tools when a project needs them.