💚
Vue.js Playground
Single File Component Editor
Reset
Examples:
Basic
Todo List
Computed
Template
Script
Style
<template> <div class="app"> <h1>{{ title }}</h1> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> <button @click="decrement">Decrement</button> <div class="list"> <h2>Items:</h2> <ul> <li v-for="item in items" :key="item.id"> {{ item.name }} </li> </ul> </div> </div> </template>
Single File Component (.vue)
Vue 3
<template> <div class="app"> <h1>{{ title }}</h1> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> <button @click="decrement">Decrement</button> <div class="list"> <h2>Items:</h2> <ul> <li v-for="item in items" :key="item.id"> {{ item.name }} </li> </ul> </div> </div> </template> <script> export default { data() { return { title: 'Vue.js Playground', count: 0, items: [ { id: 1, name: 'Learn Vue' }, { id: 2, name: 'Build Projects' }, { id: 3, name: 'Have Fun!' } ] } }, methods: { increment() { this.count++; }, decrement() { this.count--; } } } </script> <style scoped> .app { padding: 20px; font-family: Arial, sans-serif; } h1 { color: #42b883; } button { padding: 10px 20px; margin: 5px; background-color: #42b883; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; } button:hover { background-color: #35a372; } .list { margin-top: 20px; } ul { list-style-type: none; padding: 0; } li { padding: 8px; margin: 5px 0; background-color: #f0f0f0; border-radius: 4px; } </style>
💡 Tip: Use <template>, <script>, and <style scoped> sections
Live Preview