Vue Playground

Less than 1 minute

Let the Markdown file support vue playground in your VuePress site.

Tips

Since we are providing a runtime compiler, we are introducing the whole @vue/compiler-sfc package with typescript support, so the whole Vue Playground chunk is > 4MB. So you should only use this if you are heavily depending on interactive Vue Playground.

You can use Vue Demo and Playground Vue Preset as an alternative.

Settings

Install @vue/repl in your project:

pnpm

pnpm add -D @vue/repl

yarn

yarn add -D @vue/repl

npm

npm i -D @vue/repl

Then enabling via:

import { hopeTheme } from "vuepress-theme-hope";

export default {
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        vuePlayground: true,
      },
    },
  }),
};

Usage

To use vue playground, you should use a container named vue-playground.

In it, you can use 3 directives:

@file FileName then a code block to add files
@import then a json block to customize "import map"
@setting then a json block to customize settings

You can see the below demos to see more details.

You can import and call defineVuePlaygroundConfig in client config file to customize @vue/repl:

import { defineClientConfig } from "vuepress/client";
import { defineVuePlaygroundConfig } from "vuepress-plugin-md-enhance/client";

defineVuePlaygroundConfig({
  // `@vue/repl` options here
});

export default defineClientConfig({
  // ...
});

Demo

::: vue-playground Playground 1

@file App.vue

```vue
<script setup>
import { ref } from "vue";

const msg = ref("Hello Playground!");
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
</template>
```

:::

::: vue-playground Playground 2

@file App.vue

```vue
<script setup>
import { ref } from "vue";
import Comp from "./Comp.vue";

const msg = ref("Hello Playground!");
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
  <Comp />
</template>
```

@file Comp.vue

```vue
<script setup>
import { useBattery } from "@vueuse/core";
import { ref } from "vue";

const { charging, level } = useBattery();
</script>

<template>
  <h1>Battery status</h1>
  <p>Charging: {{ charging }}</p>
  <p>Level: {{ level * 100 }}%</p>
</template>
```

@import

```json
{
  "imports": {
    "@vueuse/core": "https://unpkg.com/@vueuse/core/index.mjs",
    "@vueuse/shared": "https://unpkg.com/@vueuse/shared/index.mjs",
    "vue-demi": "https://unpkg.com/vue-demi/lib/index.mjs"
  }
}
```

@setting

```json
{
  "showCompileOutput": true
}
```

:::