Write a Vue 3 Single File Component with <template>, <script setup>, and <style>. Click Run to render it live.
Key Features of Vue Playground
- Vue 3 SFC Rendering Write Single File Components using `<script setup>` syntax and style blocks.
- Live Interactive Sandbox Render and inspect reactive templates inside a secure preview panel.
- Monaco Editor Integration Autocomplete, tag matches, and full syntax validation.
Vue Playground Examples
Simple Counter with Script Setup
A fully functional Vue 3 component using composition ref hooks.
Input
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
<template>
<button @click="count++">{{ count }}</button>
</template>Output
[Visual interactive button element rendering]How to Use Vue Playground
-
1. Write a Vue SFC
Write a Vue 3 Single File Component with <template>, <script setup>, and optional <style> sections.
-
2. Click Run
Press Run or ⌘↵. The SFC compiler mounts your component into the live Preview panel.
-
3. See the Result
Your component renders immediately. Reactive state updates propagate to the preview in real time.
Common Use Cases for Vue Playground
- Vue 3 SFC Rendering Write Single File Components using `<script setup>` syntax and style blocks.
- Live Interactive Sandbox Render and inspect reactive templates inside a secure preview panel.
- Monaco Editor Integration Autocomplete, tag matches, and full syntax validation.
The Technical Details
The Vue Playground compiles templates and scripts client-side inside the browser using the official Vue compiler-sfc engine, rendering all templates safely inside a secure local sandbox iframe.
Frequently Asked Questions
Can I use the Composition API?
Yes. <script setup>, ref, reactive, computed, watch, and all Vue 3 Composition API features are available.
Can I use Vue Router or Pinia?
No. Only Vue 3 core is loaded from CDN. External plugins and state managers are not available.
Is code compiled on the server?
No. The Vue SFC compiler runs in your browser via the vue3-sfc-loader or equivalent CDN bundle.
Which Vue version is loaded?
Vue 3 is loaded from the official CDN (unpkg.com/vue@3).