Vue Playground

How to use the Vue playground

1. Edit App.vue. It holds a <script setup> block, a <template> block and a <style> block, all in one file.
2. Watch the preview update. Messages from console.log, Vue warnings and errors appear in the console under it.
3. Press + to add a component such as Greeting.vue and use it with import Greeting from './Greeting.vue'.
4. Use <style scoped> to keep a component's styles to itself. A plain .css file applies to the whole preview.
5. Open the ⋯ menu and choose Download all files (.zip) to take the project with you.

What is and is not included

You get Vue 3 with the Composition API, ref, computed, watch, v-for, v-if, props and scoped styles. You can add packages from npm with Add packages (downloaded from esm.sh only when you press Add), and organise components in folders. For plain pages without a framework use the HTML/CSS/JS Playground, and to tidy markup try the HTML Beautifier.

The sample is a counter, a list and a small child component. The top of App.vue:

<script setup>
import { ref, computed } from 'vue';
import Greeting from './Greeting.vue';

const count = ref(0);
const doubled = computed(() => count.value * 2);
const fruits = ref(['Apple', 'Banana', 'Cherry']);
</script>

<template>
  <main class="app">
    <Greeting name="Vue" />
    <button type="button" @click="count++">Clicked {{ count }} times (double: {{ doubled }})</button>
    <ul>
      <li v-for="fruit in fruits" :key="fruit">{{ fruit }}</li>
    </ul>
  </main>
</template>

<style scoped>

Result: a card with the heading Hello, Vue! (from Greeting.vue), a button that counts clicks and shows the doubled value, and a three-item fruit list.

• Leaving out the <template> block: the preview says what to add.
• Forgetting .value on a ref inside the script (it is not needed in the template).
• Importing a package before adding it: press Add packages first.
• Writing :key on a v-for element without a unique value.