Vue.js Playground

Edit a Single File Component on the left — template, script, and scoped styles render live in the preview.

💚

Vue SFC Editor

Template · script · style

TemplateSingle File Component

Vue 3SFC

<template>
  <div class="app">
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
    <div class="actions">
      <button @click="increment">+</button>
      <button @click="decrement" class="accent">−</button>
    </div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

h1 {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  background: linear-gradient(135deg, #0d89c5, #d667cd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 1rem 0;
}

button {
  padding: 0.65rem 1.5rem;
  border: none;
  border-radius: 10px;
  background: #0d89c5;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

button.accent {
  background: #d667cd;
}

ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  text-align: left;
}

li {
  padding: 0.6rem 0.75rem;
  margin-bottom: 6px;
  background: white;
  border-radius: 8px;
  color: #0a5f85;
}
</style>

Preview

preview://localhost/vue