Vue.js Playground — Learn Vue 3 in Your Browser, Free

Most Vue tutorials tell you to open a terminal, run npm create vue@latest, configure Vite, and install a handful of packages before writing a single line of code. This playground skips all of that. Vue 3 loads from CDN inside a sandboxed preview pane — open the page and you are already writing and running Vue code. The 40 lessons are structured to take you from your first createApp() call through composables, Teleport, custom directives, and four complete mini-project applications.

Getting Started — createApp, interpolation, data reactivity, methods

The first four lessons establish the mental model that makes Vue predictable: the Vue instance owns your data, the template is a reactive view of that data, and when data changes the DOM updates automatically. You write your first createApp call, see template interpolation with {{ }} render live, modify a reactive data property and watch the UI respond, and attach event handlers with methods. These four lessons alone eliminate the confusion most beginners have about how Vue wires data to the DOM.

Template Directives — v-bind, v-if, v-show, v-for, v-on, v-model

Six dedicated directive lessons, each interactive. v-bind — drag a range slider and watch an image's width attribute update live as you drag. v-if vs v-show — toggle a checkbox and open DevTools to see that v-if removes the element entirely while v-show sets display:none. v-for — edit a search input and watch the list filter in real time. v-on — click, hover, and keydown events demonstrated with a keyboard shortcut detector. v-model — a form with text, checkbox, radio, and select inputs all bound two-way simultaneously.

Computed & Watch — computed properties, watch, watchEffect

Three lessons on derived state and side effects. A computed property for a live character counter. A watcher that fires a debounced search when a query string changes. A watchEffect that automatically tracks its dependencies without listing them explicitly. Understanding the difference between these three is what separates Vue beginners from developers who write clean, efficient templates.

Components — child components, props, emits

Three lessons on Vue's component model. You register a child component inside a parent, pass data down with props (including type, required, and default validation), and pass data back up with $emit. A complete rating-star widget demonstrates a realistic parent–child communication pattern where the child emits a rating and the parent stores it reactively.

Lifecycle Hooks — onMounted, full lifecycle sequence

Two lessons. The first shows onMounted fetching simulated API data after the component renders. The second visualises the full lifecycle sequence — beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted — as a live log you trigger by interacting with the component.

Composition API — ref, reactive, composables, Options vs Composition picker

Four lessons including the most important lesson in the playground: a side-by-side picker where you toggle between the same todo application written in the Options API and the Composition API. Switching back and forth with the picker makes the mental mapping between data() → ref(), methods → plain functions, computed → computed(), watch → watch() completely concrete. The composables lesson builds useCounter and useLocalStorage from scratch and mounts them in two independent component instances — showing how stateful logic is now just a function call.

Component Patterns — slots, provide/inject

Two lessons on passing content and data through the component tree. Named slots for a Card component with separate header, body, and footer slots. Provide/inject for a theme token passed from a root provider through multiple intermediate components down to deeply nested consumers — no prop drilling.

Forms — form handling with v-model

A full form lesson covering text, email, checkbox, radio groups, and a <select> dropdown. All fields bound with v-model. A computed property derives a live summary object. A submit handler validates presence and logs the result. Practical and directly applicable to any real form you will build.

Advanced Vue — dynamic components, transition animations

Dynamic components with <component :is="currentTab"> and <KeepAlive> to preserve state when switching tabs. The transitions lesson demonstrates <Transition> with custom name attributes and CSS classes for enter/leave animations — including a fade, a slide, and a bouncing list item transition with <TransitionGroup>.

Setup Function — prop validation, emits with setup(), template refs

Three lessons on the <script setup> mental model using the Options API style of setup(props, { emit }). Prop validation with runtime type checking. emit inside setup() for a dismissible alert component. ref() as a template ref with onMounted to auto-focus an input — a pattern every form builder needs.

Advanced Patterns — Teleport, custom directives, v-memo, async components

Four lessons on patterns that separate proficient Vue developers from beginners. Teleport renders a modal at <body> level while the component that controls it sits deep in the tree. Custom directives v-focus, v-highlight, and v-tooltip are built with mounted/updated/unmounted hooks. v-memo skips re-rendering rows in a 500-item list unless specific dependencies change — a real performance pattern. Async components with defineAsyncComponent and <Suspense> demonstrate code-splitting with a loading fallback.

Mini-Projects — four complete applications

Four full applications that combine everything you have learned. A Todo App with localStorage persistence, active/done filtering, and a delete-all button. A Searchable Sortable Table using a single computed property that filters and sorts 10 employees simultaneously. A Theme Switcher using provide/inject reactive tokens so nested components switch between light, dark, and system themes without prop drilling. A Multi-step Form Wizard with four steps (Account, Plan, Payment, Review), per-step validation, a progress bar, and a final review screen that summarises all inputs before submission.

Every lesson includes a Quick Check multiple-choice question to reinforce the concept. Progress and your current lesson are saved to localStorage automatically. A Share button encodes your editor code as a base64 URL you can send to anyone. All code runs fully in your browser — no data is uploaded to any server.