Vue.js — guide & examples
Online Vue.js playground with live preview, Vue components, and reactive data binding. Build and test Vue applications directly in your browser.
About Vue.js
Online Vue.js playground with live preview, Vue components, and reactive data binding. Build and test Vue applications directly in your browser.
Runtime: v3.5.18
Features
- Vue 3 Support
- Template Syntax
- Reactive Data
- Component System
- Live Preview
- Event Handling
- Directives Support
Browser playground limits
- • Code runs in a sandboxed browser preview, without Node.js, a backend, or private environment variables.
- • The Console prompt can inspect browser globals and the rendered DOM, but not variables scoped inside ES modules or component state.
- • Download the project when you need build plugins, server APIs, native modules, or a production dependency workflow.
How to use the Vue.js playground
- Edit a source file from the project explorer — the live preview recompiles automatically.
- Add, rename, duplicate or delete project files as needed. Update affected imports after renaming or moving a file.
- Use the console for logs and errors, and Format to tidy the active file.
- Share the complete project or download a Vite project ZIP with its source files and package.json.
Editing
Select next occurrenceCtrl / ⌘+D
Delete lineCtrl / ⌘+Shift+K
Move line up / downAlt+↑ / ↓
Copy line up / downAlt+Shift+↑ / ↓
Navigation
Go to symbolCtrl / ⌘+Shift+O
Selection
Select all occurrencesCtrl / ⌘+Shift+L
Terminal
Interrupt / kill processCtrl+C
Send EOF (close stdin)Ctrl+D
Console shortcuts
Press Enter to evaluate, ↑ and ↓ to browse command history, and Ctrl/⌘ + L to clear the console.
import { createApp } from 'vue'
import App from './App.vue'
import './styles.css'
createApp(App).mount('#app')
<script setup>
import { ref } from 'vue'
import CounterCard from './components/CounterCard.vue'
const count = ref(0)
</script>
<template>
<main class="app-shell">
<p class="eyebrow">Vue 3 · Single-File Components</p>
<h1>Build with real .vue files</h1>
<p class="intro">
This playground compiles <code><script setup></code>, templates,
scoped styles, and local component imports in your browser.
</p>
<CounterCard v-model="count" />
</main>
</template>
<style scoped>
.app-shell {
width: min(680px, calc(100% - 2rem));
margin: 0 auto;
padding: 5rem 0;
}
.eyebrow {
margin: 0 0 0.75rem;
color: #087f5b;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
h1 {
margin: 0;
color: #173d32;
font-size: clamp(2.25rem, 7vw, 4.5rem);
line-height: 0.98;
letter-spacing: -0.055em;
}
.intro {
max-width: 58ch;
margin: 1.25rem 0 2rem;
color: #527067;
line-height: 1.7;
}
code {
color: #087f5b;
font-weight: 700;
}
</style>
Frequently asked questions
- Is the Vue.js playground free?
- Yes. The Vue.js playground is completely free with no sign-up — write, run and share Vue.js code in your browser.
- Do I need to install anything to run Vue.js online?
- No. The live preview compiles and runs in your browser. After downloading the project, install its dependencies before running it locally.
- Can I share or export my Vue.js code?
- Yes. Share creates a link to your project. Download exports a Vite project ZIP with its source files and package.json.
- Does the editor support autocomplete and live preview?
- It does — a Monaco-powered editor with autocomplete and formatting, a live preview that updates as you type, and a console for logs and errors.
compilebytes.com/tools/vue