Vue.js online course
The Vue.js online course in CodeWorlds is 15 modules of short lessons with a code editor and 1045 hands-on exercises, told as a story-driven adventure. You can read the lessons for free on this site.
Create future technologies in NOVA LAB under Dr. Nova's guidance - prepare systems for a mission to Mars! Year 2087.
Your guide
Dr. Nova
Lab Director
What you'll learn
- Vue.js 3 Composition API
- Vite as build tool
- Single File Components
- Reactivity - ref, reactive, computed
- Vue Router 4
- Pinia state management
- TypeScript with Vue
- Composables and VueUse
Main projects
During the course you will build real projects that you can add to your portfolio
Mission Control
Space mission control panel
NOVA Dashboard
Lab dashboard with real-time data
Mars Colony Planner
Planning a Martian colony
Course program
15 modules full of interactive exercises and practical projects
Launch Zone
Vue and Vite
What Vue.js is, Vite, Single File Components, your first app, project structure and diagnostic tools
63 exercises
Hologram Workshop
Template Syntax
Interpolation, v-bind and v-on directives, class and style binding, v-if and v-show, list rendering with v-for and template refs
81 exercises
Energy Reactor
Reactivity
ref() and reactive(), deep and shallow reactivity, toRef and toRefs, debugging reactivity and using it in practice
73 exercises
Computing Center
Computed & Watch
Computed properties with getters and setters, watch and watchEffect, stopping watchers and cleanup, and a watcher-driven dashboard
73 exercises
Control Simulator
Events & Forms
Event handling and event modifiers, forms with v-model, v-model modifiers and advanced forms in practice
73 exercises
3D Printer
Components
Creating, registering and composing components, lifecycle hooks, scoped styles and CSS Modules, and first composables
67 exercises
Communication Station
Props & Events
Props and prop validation, custom events, v-model on components, provide/inject, fallthrough attributes and communication patterns
63 exercises
Module Storage
Slots & Dynamic Components
Default, named and scoped slots, dynamic components, KeepAlive and Teleport, async components and Suspense
71 exercises
Scientific Laboratory
Composables & VueUse
Advanced composable patterns, reactive design patterns, the VueUse library, and testing and optimizing composables
67 exercises
Navigation Center
Vue Router
Route setup, dynamic parameters, nested routes and named views, navigation guards, RouterLink and programmatic navigation
71 exercises
Mission Database
Pinia
Pinia stores: state, getters and actions, Composition API stores, store composition, plugins and persistence
72 exercises
Launch Platform
Testing & Deploy
Testing components, composables and stores, integration and E2E tests, production builds and deployment
72 exercises
Martian Aurora
Transitions & Animations
The Transition component, named transitions and modes, JavaScript animation hooks, TransitionGroup, animation libraries, route transitions
63 exercises
Robotics Workshop
Directives & Plugins
Custom directives with hooks, arguments and modifiers, building plugins, renderless components and the Vue plugin ecosystem
68 exercises
Headquarters
TypeScript & Nuxt
Typing props, emits, ref, reactive and computed, template refs and provide/inject in TypeScript, plus SSR and Nuxt 3 basics
68 exercises
Course theme
Futuristic R&D Laboratory
Each module is set in a unique theme that makes learning an adventure.
Your guide
Dr. Nova
Lab Director
Will guide you through all challenges and help you gain new skills.
Vue.js course FAQ
Is the Vue.js course free?
Partly. You can read the Vue.js lessons for free on this site. The course tasks in the app require a premium plan, while a free account lets you complete the HTML and CSS course in the app with 10 fuel units a day.
How long does the Vue.js course take?
The estimated learning time for the Vue.js course is 60-80 hours. The course has 15 modules and more than 1045 tasks, and you set the pace.
Do I need previous experience for the Vue.js course?
Before the Vue.js course it helps to know: JavaScript ES6+, HTML/CSS basics, Logical thinking.
What will I learn in the Vue.js course?
In the Vue.js course you will learn, among other things: Vue.js 3 Composition API, Vite as build tool, Single File Components, Reactivity - ref, reactive, computed.
What is learning in CodeWorlds like?
In CodeWorlds, every module is a series of short lessons with a live code editor, check questions and hands-on tasks. Progress earns you XP and unlocks new locations in the Future Laboratory world.
Start learning Vue.js 3 today
Join CodeWorlds and discover modern learning methods that make programming fascinating and accessible to everyone.