Usage

Render the first file as the initial view by default.

Note: the extension of the import file cannot be omitted

::: demo My Demo

```vue App.vue
<template>
  <div>
    <div @click="increment">count: {{ count }}</div>
    <div>{{ introduction }}</div>
  </div>
</template>
<script lang="ts" setup>
import {ref, computed} from 'vue'
import {myName} from './constants.ts'

const count = ref(0)
const increment = () => {
  count.value++
}
const introduction = computed(() => `Hello, i am ${myName}!`)
</script>
```

```ts constants.ts
export const myName = 'xiao ming'
```

:::

The result of the above rendering is:

Configuration

Plugin instantiation configuration

interface SandboxOptions {
  /**
   * demo code mark，use like ::: demo
   * @default 'demo'
   */
  demoCodeMark?: string

  /**
   * default vue-playground title of toolbar
   */
  defaultDescription?: string

  /**
   * vue-playground import map
   */
  importMap?: ImportMap

  /**
   * vue-playground theme override
   */
  themes?: PlaygroundThemes
}

const sandboxPlugin = (options?: SandboxOptions) => VuepressPlugin
export default sandboxPlugin

Import map

importMap Please refer to vue-playground import map

Theme

themes Please refer to vue-playground theme override

Example

In the plugin configuration in vuepress.config.ts add:

import {defineUserConfig} from 'vuepress'
import sandboxPlugin from 'vuepress-plugin-sandbox'

const getPkgUrl = (name: string, version = 'latest', ending = '') => `https://unpkg.com/${name}@${version}${ending}`

export default defineUserConfig({
  // ....
  plugins: [
    sandboxPlugin({
      importMap: {
        imports: {
          // your libs
          'vue-xrender': getPkgUrl('vue-xrender', pkg.version, '/dist/index.mjs'),
          'class-mock': getPkgUrl('class-mock', pkg.version, '/dist/index.mjs')
        }
      }
    })
  ]
})

Override vue-playground props

import type {PlaygroundOptions} from 'vue-playground'

/**
 * Get the final vue-playground props
 * @param preOptions vue-playground old props
 * @returns needs to return final vue-playground props
 */
export type LoadSandbox = (preOptions: PlaygroundOptions) => PlaygroundOptions

/**
 * Configuration override vue-playground props
 * @param loadSandbox get the final vue-playground props function
 * @param _window the current window object
 */
export function configLoadSandbox(loadSandbox: LoadSandbox, _window: Window = self): void

Props

Please refer to vue-playground props

Example

Create a new client.ts under the .vuepress folder, and write:

import {defineClientConfig} from '@vuepress/client'
import {configLoadSandbox} from 'vuepress-plugin-sandbox/client'

// Types file content of your package
// The import method here is vite raw import
// webpack should be imported with raw-loader
import vueXrenderTypes from 'vue-xrender/dist/index.d.ts?raw'
import classMockTypes from 'class-mock/dist/index.d.ts?raw'

export default defineClientConfig({
  async enhance() {
    if (!__VUEPRESS_SSR__) {
      //only loaded in non-ssr mode
      configLoadSandbox(preOptions => {
        return {
          ...preOptions, // default vue-playground props
          pkgCdn: {
            '@vue/runtime-dom'(version) {
              // Replace the version of @vue/runtime-dom
              return `https://unpkg.com/vue@${version}/dist/vue.esm-browser.js`
            }
          },
          lifeCycle: {
            loadTsLibs(_, defaultTsLibs) {
              //Load ts type files (here can also be changed to asynchronous loading like the worker below)
              const tsLibs = [
                {content: `declare module 'vue-xrender' { ${vueXrenderTypes} }`},
                {content: `declare module 'class-mock' { ${classMockTypes} }`}
              ]
              return [...defaultTsLibs, ...tsLibs]
            },
            loadWorkers: async () => {
              // Except this loadWorkers must load the worker, other functions can not be configured
              await Promise.all([
                // load worker asynchronously
                (async () => {
                  const [
                    {default: EditorWorker},
                    {default: JsonWorker},
                    {default: HtmlWorker},
                    {default: TsWorker},
                    {default: CssWorker}
                  ] = await Promise.all([
                    // This is how vite import worker
                    // webpack should be import through worker-loader
                    import('monaco-editor/esm/vs/editor/editor.worker?worker'),
                    import('monaco-editor/esm/vs/language/json/json.worker?worker'),
                    import('monaco-editor/esm/vs/language/html/html.worker?worker'),
                    import('monaco-editor/esm/vs/language/typescript/ts.worker?worker'),
                    import('monaco-editor/esm/vs/language/css/css.worker?worker')
                  ])

                  self.MonacoEnvironment = {
                    getWorker: function (workerId, label) {
                      switch (label) {
                        case 'json':
                          return new JsonWorker()
                        case 'css':
                        case 'scss':
                        case 'less':
                          return new CssWorker()
                        case 'html':
                        case 'handlebars':
                        case 'razor':
                          return new HtmlWorker()
                        case 'typescript':
                        case 'javascript':
                          return new TsWorker()
                        default:
                          return new EditorWorker()
                      }
                    }
                  }
                })()
              ])
            }
          }
        }
      }, self)
    }
  }
})