Vue 3 Tutorial

Vue is a progressive frontend framework: declarative templates bind data to the UI. This track follows Vue 3 + the Composition API (<script setup>), from scaffolding through component communication, routing, Pinia, HTTP wrapping, forms, plugins, motion, types, and testing.

Run examples locally with Vite. This site’s playground is fine for HTML/JS, but it does not run .vue single-file components.

Know basic JavaScript. For layout see CSS. After this track, try uni-app, or tighten component types with TypeScript.

Learning path

Start here

1. Vue intro
2. Install and create a project
3. Single-file components
4. Template syntax

Reactivity and UI

5. Reactivity: ref and reactive
6. Computed and watchers
7. Conditional and list rendering
8. Events and forms

Components

9. Components basics
10. Props, events, and slots
11. Lifecycle
12. Template refs
13. Composables
14. provide and inject
15. Custom directives

Apps

16. Vue Router
17. Pinia state
18. Fetching data
19. HTTP client and interceptors
20. Forms and validation
21. Dynamic components, keep-alive, Teleport, and Suspense
22. Component styles
23. Transitions
24. Environment variables and modes
25. Plugins
26. Error handling
27. Vue and TypeScript
28. Component testing basics
29. Options API cheat sheet
30. Summary

Next: Vue intro