Skip to main content

Vue SDK

The Vue SDK is a thin wrapper around the JavaScript SDK to provide an easy to use vue component, yet retaining the full power, by having access to the SDK methods.

Demo​

show code
import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "vue": "<script setup>\n  import LiveCodes from 'livecodes/vue';\n  \n  const params = {\n    html: '<h1>Hello World!</h1>',\n    css: 'h1 {color: blue;}',\n    js: 'console.log(\"Hello, Svelte!\")',\n    console: 'open',\n  };\n</script>\n\n<template>\n  <LiveCodes :params=\"params\" />\n</template>\n"
  }
};
createPlayground('#container', options);

Installation​

Please refer to the SDK installation section.

Usage​

The Vue component is provided as the default export from livecodes/vue.

Vue
<script setup>
  import LiveCodes from 'livecodes/vue';
</script>

<template>
  <LiveCodes />
</template>
Edit in LiveCodes

TypeScript Support​

Prop types are exported as Props from livecodes/vue.

Vue
<script setup lang="ts">
  import LiveCodes, { type Props } from 'livecodes/vue';
  const options: Props = {
    // embed options
  };
</script>

<template>
  <LiveCodes v-bind="options" />
</template>
Edit in LiveCodes

For convenience, the following types are also exported from livecodes/vue:
Code, Config, EmbedOptions, Language, Playground.

TypeScript types are documented here.

Props​

All embed options are available as props with the corresponding types.

Example:

Vue
<script setup>
  import LiveCodes from 'livecodes/vue';

  const config = {
    markup: {
      language: 'markdown',
      content: '# Hello World!',
    },
  };
</script>

<template>
  <LiveCodes :config="config" view="result" />
</template>
Edit in LiveCodes

In addition, the following prop is also available:

Events​

  • "sdkReady"

    Type: (sdk: Playground) => void.

    When the playground initializes, the event "sdkReady" is emitted. The event handler function is provided with an instance of the JavaScript SDK representing the current playground. This allows making use of full capability of the SDK by calling SDK methods.

    Example:

    Vue
    <script setup lang="ts">
      import type { Playground } from 'livecodes';
      import LiveCodes, { type Props } from 'livecodes/vue';

      const options: Props = {
        config: {
          markup: {
            language: 'html',
            content: '<h1>Hello World!</h1>',
          },
        },
      };

      let playground: Playground | undefined;
      const onReady = (sdk: Playground) => {
        playground = sdk;
      };

      const run = async () => {
        await playground?.run();
      };
    </script>

    <template>
      <LiveCodes v-bind="options" @sdk-ready="onReady" />
      <button @click="run">run</button>
    </template>
    Edit in LiveCodes

Styles​

Styles can be applied to the component as usual.

By default, a set of default styles are applied to the playground container. Styles passed to the component override these default styles.

Example:

Vue
<script setup>
  import LiveCodes from 'livecodes/vue';

  const style = {
    margin: 'auto',
    width: '80%',
  };
</script>

<template>
  <LiveCodes :style="style" />
</template>
Edit in LiveCodes

Reactive Props​

Changing any prop will cause the playground to reload with the new options. However, changing the config prop is an exception — it updates the playground in place using the SDK method setConfig, without triggering a full reload. This allows for a smooth update experience when only the configuration changes.

Example:

Vue
<script setup>
import { ref } from 'vue';
import LiveCodes from 'livecodes/vue';

const config = ref({
  markup: {
    language: 'html',
    content: '<h1>Hello World!</h1>',
  },
});

function switchToMarkdown() {
  config.value = {
    markup: {
      language: 'markdown',
      content: '# Hello World! (from Markdown)',
    },
  };
}
</script>

<template>
  <LiveCodes :config="config" />
  <button @click="switchToMarkdown">Switch to Markdown</button>
</template>
Edit in LiveCodes

Storybook​

See storybook for usage examples.

Sponsors