Back
Vue Compiler
Clear
Run
Vue App (JS)
const { createApp, ref } = Vue; createApp({ setup() { const count = ref(0); const title = ref("Vue 3 Playground"); const tasks = ref(["Plan UI", "Wire state", "Ship"]); const addTask = () => { tasks.value.push("New task " + (tasks.value.length + 1)); }; return { count, title, tasks, addTask }; }, template: ` <section class="card"> <h1>{{ title }}</h1> <p>Click count: {{ count }}</p> <button @click="count++">Increment</button> <button @click="addTask">Add Task</button> <ul> <li v-for="task in tasks" :key="task">{{ task }}</li> </ul> </section> ` }).mount("#app");
CSS
body { margin: 0; font-family: Arial, sans-serif; background: #f4f7f9; } .card { max-width: 520px; margin: 30px auto; background: white; padding: 24px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } button { margin-right: 10px; margin-top: 10px; padding: 8px 14px; border: none; border-radius: 6px; background: #42b883; color: white; cursor: pointer; } ul { margin-top: 15px; padding-left: 20px; }
Output