Skip to content

Web development · Corporate training

Sample curriculum

Vue.js

Create Vue applications with reusable components, shared state, and a practical testing workflow.

  • Foundation to intermediate
  • Live online and in person
Explore the curriculum Discuss your team’s training

At a glance

Who it’s for

Freshers or teams building a foundation in this technology, with the starting knowledge listed here.

Starting point: Foundation to intermediate

Bring these foundations

  • HTML, CSS, and JavaScript fundamentals.
Foundation sessions can be included when needed.

Technologies & tools

  • Vue.js
  • Pinia
  • Vitest
  • TypeScript
Setup and versions agreed for your environment.

A practical destination

Skills to practise.

The sample path works towards these capabilities. Final goals reflect your team’s starting point and agreed scope.

  1. 01

    Build reusable Vue components and composables.

  2. 02

    Choose local or shared state for routed application features.

  3. 03

    Test API-backed forms and prepare a reliable build.

Sample curriculum

Follow the learning route.

Each module connects the concepts to practical work. Open a module to explore both.

01Module 1

Vue foundations

Concepts to understand

  • Templates, directives, and reactive data
  • Composition API and lifecycle hooks
  • Props, events, and slots

Practical work

Create an interactive list with props, events and slots. Use the Composition API to explain reactive values and lifecycle behaviour.

Show the result. Explain one decision. Identify what you would improve.
02Module 2

Application structure

Concepts to understand

  • Reusable components and composables
  • Routing and navigation
  • Shared state with Pinia

Practical work

Extract a reusable composable and connect routing with Pinia state. Explain why each piece of state is local or shared.

Show the result. Explain one decision. Identify what you would improve.
03Module 3

Forms & data access

Concepts to understand

  • Input binding and validation
  • API integration and async states
  • Accessible interactive components

Practical work

Add an accessible form with validation and API access. Show loading, error and empty states with predictable input behaviour.

Show the result. Explain one decision. Identify what you would improve.
04Module 4

Testing & delivery

Concepts to understand

  • Unit and component tests with Vitest
  • Debugging and performance
  • Build, deployment, and project review

Practical work

Write Vitest checks for a component and composable, debug a failure and prepare the application for deployment.

Show the result. Explain one decision. Identify what you would improve.

A sample project

Bring the skills together.

Build a Vue application with routing, reusable form components, API data, and Pinia state.

Shorter engagements can focus on selected exercises. A larger, learner-owned capstone can be scoped for a longer programme.

Review the work & reasoning

Four useful questions.

  1. 01

    Does the work meet the agreed requirements?

  2. 02

    Can the learner explain the key decisions and trade-offs?

  3. 03

    What happens with invalid input, failure or an unexpected condition?

  4. 04

    What would they change or explore next?

Designed & delivered by Ragav Kumar V.

Training since 2016 · 100+ batches · 3,000+ professionals trained

Live demonstrations, guided exercises, pair work and project reviews connect the concepts to implementation. We agree the goals, starting knowledge, cohort size, delivery and schedule before shaping the final curriculum.

Shape this for your team

Connect the next skill

All web development curricula
Foundation

Web foundations: HTML, CSS & JavaScript

Intermediate

Advanced JavaScript

Intermediate

TypeScript