# Frontend Development with Vue.js

Build modern, reactive user interfaces with Vue.js 3 and the Composition API — components, Pinia state management, routing, and testing.

- **Part of:** [Software Engineering — Full-Stack Web](/en/tracks/full-stack-web-developer) — learning path 2 of 3
- **Length:** 4 chapters · 20 lessons · 12 hours a week
- **Level:** Intermediate

::route
1. [Backend Development with Laravel](/en/paths/backend-development-laravel) — 5 chapters · 15 hours a week · 1 checkpoint
2. **Frontend Development with Vue.js** — 4 chapters · 12 hours a week · 1 checkpoint
3. [Full-Stack Integration & Deployment](/en/paths/full-stack-integration-deployment) — 3 chapters · 12 hours a week · 1 checkpoint
::

::cta https://app.artimend.com/tracks/full-stack-web-developer Start this track

## Syllabus

### 1. Vue.js Fundamentals

- 6 lessons
- **Skills:** Vue.js · JavaScript · Composition API · Reactivity

### 2. Components & Composition

- 5 lessons
- **Skills:** Component Design · Component Props · Events & Listeners · Composables

### 3. State Management & Routing

- 5 lessons
- **Skills:** Pinia · Vue Router · State Management · SPA Routing

### 4. Testing & Production Readiness

- 4 lessons
- **Skills:** Vitest · Component Testing · E2E Testing · Build Optimization
- **Checkpoint:** Frontend Capstone Gate

## Checkpoints

To pass each checkpoint you hand in a piece of real work. What each one asks for:

- **Frontend Capstone Gate:** Ship a tested Vue SPA: Pinia state, Vue Router with guards, a Vitest test suite, production-optimised build.