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.

It has a very simple implementation which you can easily modify in case you need.

Installation​

Please refer to the SDK installation section.

Usage​

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

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

<template>
  <LiveCodes />
</template>

TypeScript Support​

Prop types are exported as Props from livecodes/vue.

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

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

TypeScript types are documented here.

Props​

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

Example:

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

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

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

In addition, the following prop is also available:

  • height

    Type: string.

    Sets the height of playground container element.

    Example:

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

    <template>
      <LiveCodes height="500px" />
    </template>

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:

    App.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>

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:

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

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

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

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);

Sponsors