Free to read ยท Three levels
Vue: reactive interfaces and reliable application design
A complete bilingual Vue course covering Composition API, SFCs, reactive ownership, routing, shared state, async effects, testing, security, performance, and hydration.
Start learningIn this course
Learn Vue through the state, events, and component contracts of a synthetic reading-notes application. Basic lessons develop application setup, templates, refs and proxies, computed values, watchers, props, events, forms, and list identity. Intermediate lessons connect lifecycle, routing, shared stores, asynchronous work, composables, testing, and accessibility.
Advanced lessons examine typed interfaces, reactive boundaries, measured performance, untrusted content, SSR and hydration, build architecture, diagnostics, and release evidence. Every lesson includes developed explanations, contextual examples, cause-and-fix records, worked exercises, takeaways, and official primary references. Arabic lessons preserve the full concepts, examples, and worked reasoning with the same identifiers and code.
What you will learn
- Explain Vueโs state, rendering, and component ownership model.
- Design explicit prop, event, form, route, store, and composable contracts.
- Coordinate asynchronous work and cleanup with deterministic verification.
- Reason about accessibility, security, performance, SSR isolation, hydration, and release evidence.
Your learning path
Three levels
Basic: reactive components and input contracts
Build a clear model of application setup, templates, reactivity, derivation, components, and forms.
- Vue applications and single-file components
- Templates, directives, and safe expressions
- Reactivity, refs, and proxies
- Computed values and deliberate watchers
- Props, events, slots, and component contracts
- Forms, validation, and stable list identity
Intermediate: feature state and effect ownership
Coordinate lifecycle, navigation, stores, async work, reuse, testing, and accessible interaction.
- Lifecycle, DOM access, and effect cleanup
- Vue Router and route-owned state
- Shared state, Pinia, and ownership boundaries
- Asynchronous data and obsolete results
- Composable contracts and reusable stateful logic
- Component testing and accessible user tasks
Advanced: architecture, hydration, and production evidence
Keep types, performance, security, server contexts, builds, and diagnostics connected to explicit contracts.
- Typed reactive contracts and dependency boundaries
- Performance, rendering cost, and measured optimization
- Security and untrusted data boundaries
- Server rendering and deterministic hydration
- Build tooling and feature architecture
- Reliable features, observability, and release decisions
Who this is for
- JavaScript learners beginning component-based Vue development.
- Developers strengthening reactive contracts, async ownership, and production reasoning.
Before you start
- Basic HTML, CSS, JavaScript objects, functions, modules, and promises.
- Ability to read small SFC and TypeScript examples. No package installation, running project, backend, credentials, or cloud access is required for the course.