Vue Academy logo
HTMLBeginnerWebLevels A1 → C122 languages

Vue Academy

Create interactive and efficient user interfaces with Vue.js through Vue Academy. A CoddyKit learning path of 42 short courses and 156 interactive lessons, with a 24/7 AI tutor at your side.

Courses
42
Lessons
156
Interactive steps
2,022
Free to start
Course 1
Curriculum

42 courses in this path

Every course in the Vue Academy path, in learning order. The first one is free.

1

A13 lessonsFree

Get started with Vue.js — understand what it is, set up your environment, and build your first reactive application.

2

A13 lessonsPRO

Learn to scaffold Vue projects with the CLI and understand the generated file structure and tooling.

3

A13 lessonsPRO

Master Vue's declarative template syntax — interpolation, directives, conditionals, loops, and bindings.

4

A24 lessonsPRO

Transition from Options API to Vue 3's Composition API with setup(), ref, and reactive for modern Vue development.

5

A24 lessonsPRO

Write cleaner, more ergonomic components using the sugar syntax in Vue 3.

6

A24 lessonsPRO

Master every built-in Vue directive and learn to write your own custom directives.

7

A24 lessonsPRO

Build robust forms with v-model, native validation, and the VeeValidate library.

8

A23 lessonsPRO

Build reusable Vue components and connect them with props, custom events, and slots.

9

A23 lessonsPRO

Understand Vue's reactivity system and use computed properties and watchers effectively.

10

B14 lessonsPRO

Master the Vue 3 component lifecycle hooks and understand when each phase executes.

11

B14 lessonsPRO

Add smooth enter/leave transitions and list animations using Vue's and .

12

B14 lessonsPRO

Master named slots, scoped slots, and dynamic slot content to build highly reusable component APIs.

13

B14 lessonsPRO

Share data across deeply nested components without prop drilling using Vue's provide/inject mechanism.

14

B14 lessonsPRO

Write reusable stateful logic as composables — the primary code reuse pattern in Vue 3.

15

B14 lessonsPRO

Build resilient Vue applications with proper error boundaries, fallback UIs, and global error handling.

16

B14 lessonsPRO

Replace Vuex with Pinia — Vue 3's official state management library that's simpler and TypeScript-first.

17

B14 lessonsPRO

Write fully type-safe Vue 3 components with typed props, emits, and composables using TypeScript.

18

B14 lessonsPRO

Build multilingual Vue applications with vue-i18n v9, locale switching, and proper pluralization.

19

B14 lessonsPRO

Document and develop Vue components in isolation with Storybook, writing stories and interactive controls.

20

B13 lessonsPRO

Add client-side navigation to Vue apps with Vue Router — routes, params, and navigation guards.

21

B13 lessonsPRO

Manage shared application state with Vuex — state, mutations, actions, getters, and modules.

22

B13 lessonsPRO

Fetch and manage remote data in Vue apps with Axios, lifecycle hooks, and robust error handling.

23

B13 lessonsPRO

Build, deploy, and maintain Vue applications in production with hosting platforms and monitoring.

24

B14 lessonsPRO

Explore cutting-edge Vue tooling, Vapor mode, and emerging patterns shaping the future of Vue development.

25

B24 lessonsPRO

Master advanced Vue Router features — route meta, scroll behavior, transitions, and programmatic navigation.

26

B24 lessonsPRO

Build full-stack Vue applications with Nuxt 3's file-based routing, server routes, and SSR/SSG capabilities.

27

B24 lessonsPRO

Integrate GraphQL into Vue apps using Apollo Client for queries, mutations, and real-time subscriptions.

28

B24 lessonsPRO

Build live-updating Vue applications using WebSockets and Socket.io for chat, dashboards, and collaboration.

29

B24 lessonsPRO

Test Vue components reliably using Vitest and Vue Test Utils with mocking and coverage reporting.

30

B23 lessonsPRO

Speed up Vue applications with lazy loading, code splitting, memoization, and bottleneck profiling.

31

B23 lessonsPRO

Test Vue apps with unit tests using Vue Test Utils and end-to-end testing for full coverage.

32

B23 lessonsPRO

Apply advanced Vue patterns — mixins, custom directives, plugins, and scalable project organization.

33

B24 lessonsPRO

Go beyond templates with Vue's h() render function and JSX for dynamic, programmatic component creation.

34

B24 lessonsPRO

Transform Vue apps into PWAs with offline support, service workers, and native-like installation.

35

B24 lessonsPRO

Secure Vue applications against XSS, CSRF, and other web vulnerabilities with practical defense patterns.

36

B24 lessonsPRO

Build, document, and publish reusable Vue component libraries to npm using Vite's library mode.

37

B24 lessonsPRO

Create installable Vue plugins that add global components, directives, composables, and app-wide configuration.

38

C14 lessonsPRO

Architect large-scale Vue applications as independent micro-frontends using Module Federation.

39

C14 lessonsPRO

Master advanced reactivity patterns, state machines, and composable factories for complex Vue applications.

40

C14 lessonsPRO

Profile and optimize Vue application performance with v-memo, lazy loading, and reactive system tuning.

41

C14 lessonsPRO

Implement streaming SSR and Vue Suspense for progressive page loading and improved Core Web Vitals.

42

C14 lessonsPRO

Build a production-ready full-stack application with Vue 3 frontend, Fastify backend, and JWT authentication.

CoddyKit PRO

Unlock all 42 courses in this path, and every other path

AI tutor, certification exam and certificate. Works on web, iOS and Android.

See all plans
Yearly$29.90 / yearAbout $2.49 a monthPay onceLifetime$69.99 onceNo renewals. PRO forever.
Course Overview

Vue.js: The Progressive Framework for Building Real UIs

Vue.js is the progressive JavaScript framework designed for building component-driven user interfaces — from a single interactive widget embedded in an existing page to a fully server-rendered application with Nuxt. Its Composition API, fine-grained reactivity system, and first-class TypeScript support make it a practical choice for both new projects and teams migrating away from older frontends. This track covers Vue 3 end to end, from template syntax through production deployment.

What You Will Learn

You will work through the Composition API and script setup syntax, Vue directives, computed properties, and reactivity fundamentals. The track covers component communication, slots, provide/inject, and composables for shared logic. You will manage application state with both Pinia and Vuex, handle routing with Vue Router including advanced patterns, validate forms, and consume REST APIs alongside real-time data via WebSockets. Later courses address TypeScript integration, internationalization, Storybook, testing with Vitest, performance optimization, server-side rendering with Nuxt 3, GraphQL with Apollo, Progressive Web Apps, and Vue security practices.

The Learning Path

Forty-two courses span A1 through C1. The A1 and A2 courses establish the Vue CLI, template syntax, data binding, directives, forms, and component basics. B1 courses build out the full ecosystem: lifecycle hooks, transitions, Pinia, Vuex, Vue Router, TypeScript, i18n, and async data. B2 raises the bar with server-side rendering via Nuxt 3, GraphQL, WebSockets, component testing, render functions, PWA support, and publishing a component library. The C1 capstone courses tackle micro-frontend architecture, advanced Composition API patterns, SSR streaming with Suspense, Vue performance at scale, and a full-stack application built with Fastify and authentication.

How It Works

Each course is split into short, focused lessons you complete in the built-in code editor with real-time feedback. An AI tutor is available when you get stuck, so you can move through syntax exercises, component challenges, and architecture problems at your own pace without leaving the app.

How You'll Learn

  1. 01

    Interactive Lessons

    Hands-on coding exercises with real-time feedback

  2. 02

    AI Tutor

    Get instant help from our AI when you're stuck

  3. 03

    Built-in Editor

    Write and run code directly in your browser

  4. 04

    Certificate

    Earn a certificate when you complete the course

FAQ

Frequently Asked Questions

Is the Vue Academy course free?

Yes. You can start the Vue Academy course for free and complete its interactive lessons at no cost. An optional PRO subscription unlocks advanced AI tools and a shareable certificate.

Do I need prior experience to learn HTML?

No. The course begins with the fundamentals and gradually moves to more advanced topics, so you can start even with no prior HTML experience.

How will I learn HTML on CoddyKit?

You learn by doing. Short interactive lessons pair a clear explanation with a hands-on coding exercise that runs in real time, and a 24/7 AI tutor gives personalized help whenever you get stuck.

Do I get a certificate for completing Vue Academy?

Yes. PRO learners can take an exam and earn a shareable certificate of completion with a verifiable code for the Vue Academy course.

Can I learn HTML on my phone?

Yes. CoddyKit is available on the web and as native iOS and Android apps, so you can learn HTML on any device and your progress syncs across them.

How much does CoddyKit PRO cost?

The first course of Vue Academy is free. CoddyKit PRO unlocks every course: $5.90 per week, $7.90 per month, $29.90 per year, or $69.99 once for lifetime access with no renewals.

How long does it take to complete Vue Academy?

Vue Academy has 42 courses and 156 lessons. Most lessons take about 5–10 minutes, so the whole path is roughly 18 hours of hands-on practice, at your own pace.

Start Vue Academy Now

Join thousands of learners mastering programming with AI-powered lessons.