Vue Playground

Пусть файл Markdown поддерживает playground vue на вашем сайте VuePress.

Конфиг

TS

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        // enable vue playground
        vuePlayground: true,
      },
    },
  }),
});

JS

// .vuepress/config.js
import { mdEnhance } from "vuepress-plugin-md-enhance";

export default {
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        // enable vue playground
        vuePlayground: true,
      },
    },
  }),
};

Использование

Чтобы использовать playground vue, вы должны использовать контейнер с именем vue-playground.

В нем вы можете использовать 3 директивы:

• @file FileName, затем блок кода для добавления файлов
• @import, затем блок json для настройки "import map"
• @setting, затем блок json для настройки параметров

Вы можете увидеть демо ниже, чтобы увидеть больше деталей.

Демо

Vue Playground

Code

::: vue-playground Vue Playground

@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 with customized settings and import

Code

::: vue-playground Vue Playground with customized settings and import

@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
}
```

:::