Config

Options

You can pass these options to the plugin:

playgroundPlaygroundGlobalOptions

Playground options.

See also: Playground.

playground.presetsRequired(BuiltInPlaygroundPreset | PlaygroundOptions)[]

Playground presets. BuiltInPlaygroundPreset is one of "ts", "vue" and "unocss", which enables a built-in preset, while an object configures a custom playground.

playground.presets[*].nameRequiredstring

Playground container name.

playground.presets[*].componentstring

Default"Playground"

Playground component name.

playground.presets[*].propsGetterRequired(data: PlaygroundData) => Record<string, string>

Props getter. Its data argument has the following types:

interface PlaygroundCodeConfig {
  /**
   * Code block extension
   *
   * @description It's based on filename, not code fence language
   */
  ext: string;

  /** Code block content */
  content: string;
}

interface PlaygroundData {
  /** Title of Playground */
  title?: string;

  /**
   * Import map file name
   *
   * @default "import-map.json"
   */
  importMap?: string;

  /** Playground files info */
  files: Record<
    /** File name */
    string,
    /** File detail */
    PlaygroundCodeConfig
  >;

  /**
   * Playground settings
   *
   * @description It's parsed result of json content after setting directive
   */
  settings: Record<string, unknown>;

  /** hash key based on playground content */
  key: string;
}

playground.config{ ts?: TSPresetPlaygroundOptions; vue?: VuePresetPlaygroundOptions; unocss?: UnoPresetPlaygroundOptions }

Playground config of the built-in presets.

playground.config.tsTSPresetPlaygroundOptions

Options of the ts preset.

playground.config.ts.servicestring

Default"https://www.typescriptlang.org/play"

External playground service url.

playground.config.vueVuePresetPlaygroundOptions

Options of the vue preset.

playground.config.vue.servicestring

Default"https://sfc.vuejs.org/"

External playground service url.

playground.config.vue.devboolean

Whether to use the development version.

playground.config.vue.ssrboolean

Whether to enable SSR.

playground.config.unocssUnoPresetPlaygroundOptions

Options of the unocss preset.

playground.config.unocss.servicestring

Default"https://unocss.dev/play"

External playground service url.

kotlinPlaygroundboolean

Whether to enable kotlin playground support.

See also: Kotlin Playground.

vuePlaygroundboolean

Whether to enable vue playground support.

See also: Vue Playground.

demoPartial<CodeDemoOptions> | boolean

Whether to enable code demo support.

See also: Code Demo.

demo.jsLibstring[]

External JS libraries for CodePen, JsFiddle only.

demo.cssLibstring[]

External CSS libraries for CodePen, JsFiddle only.

Warning

The above two options are only used by third-party code demo service, you need to import these libraries in head to get it work.

demo.jsfiddleboolean

Defaulttrue

Whether to display the JSFiddle button.

demo.codepenboolean

Defaulttrue

Whether to display the CodePen button.

demo.codepenLayout"top" | "left" | "right"

Default"left"

CodePen editor layout.

demo.codepenEditorsstring

Default"101"

CodePen editor status.

The following are the library links used by the third-party code demo service. Unless your environment cannot visit unpkg or the speed is slow, you probably don't need to override the default values.

demo.babelstring

Default"https://unpkg.com/@babel/standalone/babel.min.js"

demo.vuestring

Default"https://unpkg.com/vue/dist/vue.global.prod.js"

demo.reactstring

Default"https://unpkg.com/react/umd/react.production.min.js"

demo.reactDOMstring

Default"https://unpkg.com/react-dom/umd/react-dom.production.min.js"

sandpackboolean

Whether to enable sandpack playground support.

Client Config

defineKotlinPlaygroundConfig

interface KotlinPlaygroundOptions {
  server?: string;
  version?: string;

  onChange?: (code: string) => void;
  onRun?: () => void;
  onError?: () => void;
  getJsCode?: (code: string) => void;
  onTestPassed?: () => void;
  onTestFailed?: () => void;
  onOpenConsole?: () => void;
  onCloseConsole?: () => void;
  callback?: (targetNode: HTMLElement, mountNode: HTMLElement) => void;
  getInstance?: (instance: KotlinPlaygroundInstance) => void;
}

const defineKotlinPlaygroundConfig: (options: KotlinPlaygroundOptions) => void;

Define config which you want to pass to kotlin-playground.

defineSandpackConfig

 interface SandpackConfig {
  /**
   * specify the template
   */
  template?: SandpackPredefinedTemplate;

  /**
   * Options to configure the sandpack
   */
  options?: SandpackOptions;

  /**
   * Options to configure the customSetup
   */
  customSetup?: SandpackSetup;
}

const defineSandpackConfig = (config: SandpackConfig)=> void

Define config which you want to pass to sandpack-vue3.

defineVuePlaygroundConfig

export interface VuePlaygroundOptions extends Omit<
  ReplProps,
  "store" | "editor"
> {
  /**
   * Specify the version of vue
   */
  vueVersion?: string;

  /**
   * Specify default URL to import Vue dev runtime from in the sandbox
   *
   * @default "https://unpkg.com/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser.js"
   */
  vueRuntimeDevUrl?: string | (() => string);

  /**
   * Specify default URL to import Vue prod runtime from in the sandbox
   *
   * @default "https://unpkg.com/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser.prod.js"
   */
  vueRuntimeProdUrl?: string | (() => string);

  /**
   * Specify default URL to import Vue Server Renderer from in the sandbox
   *
   * @default "https://unpkg.com/@vue/server-renderer@${version}/dist/server-renderer.esm-browser.js"
   */
  vueServerRendererUrl?: string | (() => string);
}

const defineVuePlaygroundConfig: (options: VuePlaygroundOptions) => void;

Define config which you want to pass to @vue/repl.