Vue.js, The Progressive JavaScript Framework, is an approachable, performant and versatile framework for building web user interfaces.
This is the documentation for LiveCodes language support for Vue Single-File Component (SFC).
The support for Vue 2 SFC (the older, EOL version) is documented separately.
Usage
Vue SFC can be used as documented in the specs, including support for Scoped CSS, CSS Modules, pre-processors, JSX and src
imports. See below for usage.
Demo
show code
import { createPlayground } from 'livecodes';
const options = {
"template": "vue"
};
createPlayground('#container', options);
import { createPlayground, type EmbedOptions } from 'livecodes';
const options: EmbedOptions = {
"template": "vue"
};
createPlayground('#container', options);
import LiveCodes from 'livecodes/react';
export default function App() {
const options = {
"template": "vue"
};
return (<LiveCodes {...options}></LiveCodes>);
}
<script setup>
import LiveCodes from "livecodes/vue";
const options = {
"template": "vue"
};
</script>
<template>
<LiveCodes v-bind="options" />
</template>
<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';
let options = $state({
"template": "vue"
});
let container = $state(null);
onMount(() => {
createPlayground(container, options);
});
</script>
<div bind:this="{container}"></div>
Scoped CSS
When a <style>
tag has the scoped attribute, its CSS will apply to elements of the current component only.
— docs
CSS Modules
A <style module>
tag is compiled as CSS Modules and exposes the resulting CSS classes to the component as an object under the key of $style
.
— docs
CSS Frameworks
CSS Frameworks supported in LiveCodes (e.g. Tailwind CSS, UnoCSS, WindiCSS) can detect class names added in Vue SFCs. Make sure that the required utility is enabled (from style editor menu or in processors
property of configuration object).
See example below.
Please note that the SFC style block can use any of the supported languages that compile to CSS (e.g. SCSS, Stylus, etc),
but currently is not processed by CSS processors (e.g. Tailwind CSS, Autoprefixer, etc).
See limitations.
Languages and Pre-Processors
Blocks can declare pre-processor languages using the lang
attribute.
— docs
Many of the languages supported in LiveCodes can be used. The value of lang
attribute can be the language name (specified in its documentation page) or any of its aliases (extensions).
JSX
JSX can be used in render functions without needing any configuration.
src
Imports
The src attribute can be used to import an external file for a language block:
<template src="https://my-website.com/template.html"></template>
<style src="https://my-website.com/style.css"></style>
<script src="https://my-website.com/script.js"></script>
The value of src
attribute can be either:
- Absolute URL (e.g.
https://unpkg.com/todomvc-app-css/index.css
)
- Path in npm package (e.g.
todomvc-app-css/index.css
)
Relative paths (e.g. ./my-styles.css
) cannot be used (because there is no file system in LiveCodes).
The imported sources can use any of the supported languages/pre-processors (identified by the file extension or can be specified by lang
attribute).
Module Imports
npm modules can be imported as described in the section about module resolution, including bare module imports and importing from different CDNs. Stylesheets imported in the script
block are added as <link rel="stylesheet">
tags in the page head
.
Example:
Module imports can be customized using import maps as described in module resolution documentations.
Multiple Components
Vue is supported in both markup and script editors.
This allows having a component in the markup editor that imports (and passes props to) a component in the script editor. The opposite is not supported.
This can be done using relative import of a file name in the same directory. Any file name will resolve to the component in the script editor,
e.g. ./script.vue
, ./Component.vue
, ./Counter.vue
, etc.
show code
import { createPlayground } from 'livecodes';
const options = {
"config": {
"markup": {
"language": "vue",
"content": "<script setup>\nimport Counter from './Counter.vue';\n</script>\n\n<template>\n <div class=\"w-full text-center\">\n <Counter start=\"5\" />\n </div>\n</template>\n"
},
"script": {
"language": "vue",
"content": "<script setup lang=\"ts\">\n import { ref } from \"vue\";\n const props = defineProps({\n start: {\n type: Number,\n default: 0,\n },\n });\n const count = ref(props.start);\n</script>\n\n<template>\n <div class=\"mt-8\">\n <span ref=\"counter\" class=\"text-3xl font-bold\">{{ count }}</span>\n </div>\n <div class=\"mt-4 space-x-4\">\n <button title=\"-\" @click=\"count--\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">-</button>\n <button title=\"+\" @click=\"count++\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">+</button>\n </div>\n <div class=\"mt-4 space-x-4\">\n <button @click=\"count = props.start\" class=\"text-md font-medium bg-red-500 hover:bg-red-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">Reset</button>\n </div>\n</template>\n"
},
"style": {
"language": "css",
"content": "@import \"tailwindcss\";\n"
},
"processors": [
"tailwindcss"
]
}
};
createPlayground('#container', options);
import { createPlayground, type EmbedOptions } from 'livecodes';
const options: EmbedOptions = {
"config": {
"markup": {
"language": "vue",
"content": "<script setup>\nimport Counter from './Counter.vue';\n</script>\n\n<template>\n <div class=\"w-full text-center\">\n <Counter start=\"5\" />\n </div>\n</template>\n"
},
"script": {
"language": "vue",
"content": "<script setup lang=\"ts\">\n import { ref } from \"vue\";\n const props = defineProps({\n start: {\n type: Number,\n default: 0,\n },\n });\n const count = ref(props.start);\n</script>\n\n<template>\n <div class=\"mt-8\">\n <span ref=\"counter\" class=\"text-3xl font-bold\">{{ count }}</span>\n </div>\n <div class=\"mt-4 space-x-4\">\n <button title=\"-\" @click=\"count--\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">-</button>\n <button title=\"+\" @click=\"count++\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">+</button>\n </div>\n <div class=\"mt-4 space-x-4\">\n <button @click=\"count = props.start\" class=\"text-md font-medium bg-red-500 hover:bg-red-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">Reset</button>\n </div>\n</template>\n"
},
"style": {
"language": "css",
"content": "@import \"tailwindcss\";\n"
},
"processors": [
"tailwindcss"
]
}
};
createPlayground('#container', options);
import LiveCodes from 'livecodes/react';
export default function App() {
const options = {
"config": {
"markup": {
"language": "vue",
"content": "<script setup>\nimport Counter from './Counter.vue';\n</script>\n\n<template>\n <div class=\"w-full text-center\">\n <Counter start=\"5\" />\n </div>\n</template>\n"
},
"script": {
"language": "vue",
"content": "<script setup lang=\"ts\">\n import { ref } from \"vue\";\n const props = defineProps({\n start: {\n type: Number,\n default: 0,\n },\n });\n const count = ref(props.start);\n</script>\n\n<template>\n <div class=\"mt-8\">\n <span ref=\"counter\" class=\"text-3xl font-bold\">{{ count }}</span>\n </div>\n <div class=\"mt-4 space-x-4\">\n <button title=\"-\" @click=\"count--\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">-</button>\n <button title=\"+\" @click=\"count++\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">+</button>\n </div>\n <div class=\"mt-4 space-x-4\">\n <button @click=\"count = props.start\" class=\"text-md font-medium bg-red-500 hover:bg-red-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">Reset</button>\n </div>\n</template>\n"
},
"style": {
"language": "css",
"content": "@import \"tailwindcss\";\n"
},
"processors": [
"tailwindcss"
]
}
};
return (<LiveCodes {...options}></LiveCodes>);
}
<script setup>
import LiveCodes from "livecodes/vue";
const options = {
"config": {
"markup": {
"language": "vue",
"content": "<script setup>\nimport Counter from './Counter.vue';\n</script>\n\n<template>\n <div class=\"w-full text-center\">\n <Counter start=\"5\" />\n </div>\n</template>\n"
},
"script": {
"language": "vue",
"content": "<script setup lang=\"ts\">\n import { ref } from \"vue\";\n const props = defineProps({\n start: {\n type: Number,\n default: 0,\n },\n });\n const count = ref(props.start);\n</script>\n\n<template>\n <div class=\"mt-8\">\n <span ref=\"counter\" class=\"text-3xl font-bold\">{{ count }}</span>\n </div>\n <div class=\"mt-4 space-x-4\">\n <button title=\"-\" @click=\"count--\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">-</button>\n <button title=\"+\" @click=\"count++\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">+</button>\n </div>\n <div class=\"mt-4 space-x-4\">\n <button @click=\"count = props.start\" class=\"text-md font-medium bg-red-500 hover:bg-red-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">Reset</button>\n </div>\n</template>\n"
},
"style": {
"language": "css",
"content": "@import \"tailwindcss\";\n"
},
"processors": [
"tailwindcss"
]
}
};
</script>
<template>
<LiveCodes v-bind="options" />
</template>
<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';
let options = $state({
"config": {
"markup": {
"language": "vue",
"content": "<script setup>\nimport Counter from './Counter.vue';\n</script>\n\n<template>\n <div class=\"w-full text-center\">\n <Counter start=\"5\" />\n </div>\n</template>\n"
},
"script": {
"language": "vue",
"content": "<script setup lang=\"ts\">\n import { ref } from \"vue\";\n const props = defineProps({\n start: {\n type: Number,\n default: 0,\n },\n });\n const count = ref(props.start);\n</script>\n\n<template>\n <div class=\"mt-8\">\n <span ref=\"counter\" class=\"text-3xl font-bold\">{{ count }}</span>\n </div>\n <div class=\"mt-4 space-x-4\">\n <button title=\"-\" @click=\"count--\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">-</button>\n <button title=\"+\" @click=\"count++\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">+</button>\n </div>\n <div class=\"mt-4 space-x-4\">\n <button @click=\"count = props.start\" class=\"text-md font-medium bg-red-500 hover:bg-red-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">Reset</button>\n </div>\n</template>\n"
},
"style": {
"language": "css",
"content": "@import \"tailwindcss\";\n"
},
"processors": [
"tailwindcss"
]
}
});
let container = $state(null);
onMount(() => {
createPlayground(container, options);
});
</script>
<div bind:this="{container}"></div>
Please note that LiveCodes does not have the concept of a file system. However, you can configure editor options like title
, order
and hideTitle
to simulate multiple files, change editor order or even hide editors.
Example:
show code
import { createPlayground } from 'livecodes';
const options = {
"config": {
"markup": {
"language": "vue",
"content": "<script setup>\nimport Counter from './Counter.vue';\n</script>\n\n<template>\n <div class=\"w-full text-center\">\n <Counter start=\"5\" />\n </div>\n</template>\n",
"title": "App.vue"
},
"script": {
"language": "vue",
"content": "<script setup lang=\"ts\">\n import { ref } from \"vue\";\n const props = defineProps({\n start: {\n type: Number,\n default: 0,\n },\n });\n const count = ref(props.start);\n</script>\n\n<template>\n <div class=\"mt-8\">\n <span ref=\"counter\" class=\"text-3xl font-bold\">{{ count }}</span>\n </div>\n <div class=\"mt-4 space-x-4\">\n <button title=\"-\" @click=\"count--\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">-</button>\n <button title=\"+\" @click=\"count++\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">+</button>\n </div>\n <div class=\"mt-4 space-x-4\">\n <button @click=\"count = props.start\" class=\"text-md font-medium bg-red-500 hover:bg-red-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">Reset</button>\n </div>\n</template>\n",
"title": "Counter.vue"
},
"style": {
"language": "css",
"content": "@import \"tailwindcss\";\n",
"title": "styles.css",
"order": 3
},
"processors": [
"tailwindcss"
]
}
};
createPlayground('#container', options);
import { createPlayground, type EmbedOptions } from 'livecodes';
const options: EmbedOptions = {
"config": {
"markup": {
"language": "vue",
"content": "<script setup>\nimport Counter from './Counter.vue';\n</script>\n\n<template>\n <div class=\"w-full text-center\">\n <Counter start=\"5\" />\n </div>\n</template>\n",
"title": "App.vue"
},
"script": {
"language": "vue",
"content": "<script setup lang=\"ts\">\n import { ref } from \"vue\";\n const props = defineProps({\n start: {\n type: Number,\n default: 0,\n },\n });\n const count = ref(props.start);\n</script>\n\n<template>\n <div class=\"mt-8\">\n <span ref=\"counter\" class=\"text-3xl font-bold\">{{ count }}</span>\n </div>\n <div class=\"mt-4 space-x-4\">\n <button title=\"-\" @click=\"count--\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">-</button>\n <button title=\"+\" @click=\"count++\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">+</button>\n </div>\n <div class=\"mt-4 space-x-4\">\n <button @click=\"count = props.start\" class=\"text-md font-medium bg-red-500 hover:bg-red-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">Reset</button>\n </div>\n</template>\n",
"title": "Counter.vue"
},
"style": {
"language": "css",
"content": "@import \"tailwindcss\";\n",
"title": "styles.css",
"order": 3
},
"processors": [
"tailwindcss"
]
}
};
createPlayground('#container', options);
import LiveCodes from 'livecodes/react';
export default function App() {
const options = {
"config": {
"markup": {
"language": "vue",
"content": "<script setup>\nimport Counter from './Counter.vue';\n</script>\n\n<template>\n <div class=\"w-full text-center\">\n <Counter start=\"5\" />\n </div>\n</template>\n",
"title": "App.vue"
},
"script": {
"language": "vue",
"content": "<script setup lang=\"ts\">\n import { ref } from \"vue\";\n const props = defineProps({\n start: {\n type: Number,\n default: 0,\n },\n });\n const count = ref(props.start);\n</script>\n\n<template>\n <div class=\"mt-8\">\n <span ref=\"counter\" class=\"text-3xl font-bold\">{{ count }}</span>\n </div>\n <div class=\"mt-4 space-x-4\">\n <button title=\"-\" @click=\"count--\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">-</button>\n <button title=\"+\" @click=\"count++\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">+</button>\n </div>\n <div class=\"mt-4 space-x-4\">\n <button @click=\"count = props.start\" class=\"text-md font-medium bg-red-500 hover:bg-red-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">Reset</button>\n </div>\n</template>\n",
"title": "Counter.vue"
},
"style": {
"language": "css",
"content": "@import \"tailwindcss\";\n",
"title": "styles.css",
"order": 3
},
"processors": [
"tailwindcss"
]
}
};
return (<LiveCodes {...options}></LiveCodes>);
}
<script setup>
import LiveCodes from "livecodes/vue";
const options = {
"config": {
"markup": {
"language": "vue",
"content": "<script setup>\nimport Counter from './Counter.vue';\n</script>\n\n<template>\n <div class=\"w-full text-center\">\n <Counter start=\"5\" />\n </div>\n</template>\n",
"title": "App.vue"
},
"script": {
"language": "vue",
"content": "<script setup lang=\"ts\">\n import { ref } from \"vue\";\n const props = defineProps({\n start: {\n type: Number,\n default: 0,\n },\n });\n const count = ref(props.start);\n</script>\n\n<template>\n <div class=\"mt-8\">\n <span ref=\"counter\" class=\"text-3xl font-bold\">{{ count }}</span>\n </div>\n <div class=\"mt-4 space-x-4\">\n <button title=\"-\" @click=\"count--\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">-</button>\n <button title=\"+\" @click=\"count++\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">+</button>\n </div>\n <div class=\"mt-4 space-x-4\">\n <button @click=\"count = props.start\" class=\"text-md font-medium bg-red-500 hover:bg-red-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">Reset</button>\n </div>\n</template>\n",
"title": "Counter.vue"
},
"style": {
"language": "css",
"content": "@import \"tailwindcss\";\n",
"title": "styles.css",
"order": 3
},
"processors": [
"tailwindcss"
]
}
};
</script>
<template>
<LiveCodes v-bind="options" />
</template>
<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';
let options = $state({
"config": {
"markup": {
"language": "vue",
"content": "<script setup>\nimport Counter from './Counter.vue';\n</script>\n\n<template>\n <div class=\"w-full text-center\">\n <Counter start=\"5\" />\n </div>\n</template>\n",
"title": "App.vue"
},
"script": {
"language": "vue",
"content": "<script setup lang=\"ts\">\n import { ref } from \"vue\";\n const props = defineProps({\n start: {\n type: Number,\n default: 0,\n },\n });\n const count = ref(props.start);\n</script>\n\n<template>\n <div class=\"mt-8\">\n <span ref=\"counter\" class=\"text-3xl font-bold\">{{ count }}</span>\n </div>\n <div class=\"mt-4 space-x-4\">\n <button title=\"-\" @click=\"count--\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">-</button>\n <button title=\"+\" @click=\"count++\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">+</button>\n </div>\n <div class=\"mt-4 space-x-4\">\n <button @click=\"count = props.start\" class=\"text-md font-medium bg-red-500 hover:bg-red-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">Reset</button>\n </div>\n</template>\n",
"title": "Counter.vue"
},
"style": {
"language": "css",
"content": "@import \"tailwindcss\";\n",
"title": "styles.css",
"order": 3
},
"processors": [
"tailwindcss"
]
}
});
let container = $state(null);
onMount(() => {
createPlayground(container, options);
});
</script>
<div bind:this="{container}"></div>
When both markup and script editors use Vue, the component in the markup editor is used as the main component rendered in the root element.
To render the component in the script editor, it has to be imported and used by the main component.
Importing External SFCs
External Vue SFCs can be imported. The import URL has to be an absolute URL ending with .vue
extension. Any bare or relative imports in the imported files are resolved and compiled recursively.
This is an example of importing a Vue SFC, which in turn imports other Vue SFCs (the imported components use Tailwind CSS, which is enabled in this project as a CSS preprocessor):
show code
import { createPlayground } from 'livecodes';
const options = {
"config": {
"activeEditor": "script",
"script": {
"language": "vue",
"content": "<script setup>\nimport Counter from 'https://raw.githubusercontent.com/hatemhosny/simple-vue-counter/main/src/App.vue';\n</script>\n\n<template>\n <Counter />\n</template>\n"
},
"style": {
"language": "css",
"content": "@import \"tailwindcss\";\n"
},
"processors": [
"tailwindcss"
]
}
};
createPlayground('#container', options);
import { createPlayground, type EmbedOptions } from 'livecodes';
const options: EmbedOptions = {
"config": {
"activeEditor": "script",
"script": {
"language": "vue",
"content": "<script setup>\nimport Counter from 'https://raw.githubusercontent.com/hatemhosny/simple-vue-counter/main/src/App.vue';\n</script>\n\n<template>\n <Counter />\n</template>\n"
},
"style": {
"language": "css",
"content": "@import \"tailwindcss\";\n"
},
"processors": [
"tailwindcss"
]
}
};
createPlayground('#container', options);
import LiveCodes from 'livecodes/react';
export default function App() {
const options = {
"config": {
"activeEditor": "script",
"script": {
"language": "vue",
"content": "<script setup>\nimport Counter from 'https://raw.githubusercontent.com/hatemhosny/simple-vue-counter/main/src/App.vue';\n</script>\n\n<template>\n <Counter />\n</template>\n"
},
"style": {
"language": "css",
"content": "@import \"tailwindcss\";\n"
},
"processors": [
"tailwindcss"
]
}
};
return (<LiveCodes {...options}></LiveCodes>);
}
<script setup>
import LiveCodes from "livecodes/vue";
const options = {
"config": {
"activeEditor": "script",
"script": {
"language": "vue",
"content": "<script setup>\nimport Counter from 'https://raw.githubusercontent.com/hatemhosny/simple-vue-counter/main/src/App.vue';\n</script>\n\n<template>\n <Counter />\n</template>\n"
},
"style": {
"language": "css",
"content": "@import \"tailwindcss\";\n"
},
"processors": [
"tailwindcss"
]
}
};
</script>
<template>
<LiveCodes v-bind="options" />
</template>
<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';
let options = $state({
"config": {
"activeEditor": "script",
"script": {
"language": "vue",
"content": "<script setup>\nimport Counter from 'https://raw.githubusercontent.com/hatemhosny/simple-vue-counter/main/src/App.vue';\n</script>\n\n<template>\n <Counter />\n</template>\n"
},
"style": {
"language": "css",
"content": "@import \"tailwindcss\";\n"
},
"processors": [
"tailwindcss"
]
}
});
let container = $state(null);
onMount(() => {
createPlayground(container, options);
});
</script>
<div bind:this="{container}"></div>
Please note that extensionless imports are not supported. However, you may customize the import URL using import maps as described in module resolution section.
This is an example of importing a Vue SFC, which in turn imports other Vue SFCs and extensionless imports, that are customized using importmap:
Custom Settings
{
"imports": {
"https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList.js",
"https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition.js"
}
}
show code
import { createPlayground } from 'livecodes';
const options = {
"config": {
"activeEditor": "script",
"script": {
"language": "vue",
"content": "<script setup>\nimport App from 'https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/App.vue';\n</script>\n\n<template>\n<App />\n</template>\n"
},
"imports": {
"https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList.js",
"https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition.js"
}
}
};
createPlayground('#container', options);
import { createPlayground, type EmbedOptions } from 'livecodes';
const options: EmbedOptions = {
"config": {
"activeEditor": "script",
"script": {
"language": "vue",
"content": "<script setup>\nimport App from 'https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/App.vue';\n</script>\n\n<template>\n<App />\n</template>\n"
},
"imports": {
"https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList.js",
"https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition.js"
}
}
};
createPlayground('#container', options);
import LiveCodes from 'livecodes/react';
export default function App() {
const options = {
"config": {
"activeEditor": "script",
"script": {
"language": "vue",
"content": "<script setup>\nimport App from 'https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/App.vue';\n</script>\n\n<template>\n<App />\n</template>\n"
},
"imports": {
"https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList.js",
"https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition.js"
}
}
};
return (<LiveCodes {...options}></LiveCodes>);
}
<script setup>
import LiveCodes from "livecodes/vue";
const options = {
"config": {
"activeEditor": "script",
"script": {
"language": "vue",
"content": "<script setup>\nimport App from 'https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/App.vue';\n</script>\n\n<template>\n<App />\n</template>\n"
},
"imports": {
"https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList.js",
"https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition.js"
}
}
};
</script>
<template>
<LiveCodes v-bind="options" />
</template>
<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';
let options = $state({
"config": {
"activeEditor": "script",
"script": {
"language": "vue",
"content": "<script setup>\nimport App from 'https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/App.vue';\n</script>\n\n<template>\n<App />\n</template>\n"
},
"imports": {
"https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList.js",
"https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition.js"
}
}
});
let container = $state(null);
onMount(() => {
createPlayground(container, options);
});
</script>
<div bind:this="{container}"></div>
Root Element
To mount the application instance to a specific DOM element use "livecodes-app"
as the element id
in the HTML. Otherwise, if that element is not found, a new div
element is added to document.body
and is used to mount the instance.
Example:
show code
import { createPlayground } from 'livecodes';
const options = {
"config": {
"markup": {
"language": "html",
"content": "<h1>Custom Root Element</h1>\n<div id=\"livecodes-app\"></div>\n<p>...other page content</p>\n"
},
"script": {
"language": "vue",
"content": "<template>I'm a Vue SFC</template>"
}
}
};
createPlayground('#container', options);
import { createPlayground, type EmbedOptions } from 'livecodes';
const options: EmbedOptions = {
"config": {
"markup": {
"language": "html",
"content": "<h1>Custom Root Element</h1>\n<div id=\"livecodes-app\"></div>\n<p>...other page content</p>\n"
},
"script": {
"language": "vue",
"content": "<template>I'm a Vue SFC</template>"
}
}
};
createPlayground('#container', options);
import LiveCodes from 'livecodes/react';
export default function App() {
const options = {
"config": {
"markup": {
"language": "html",
"content": "<h1>Custom Root Element</h1>\n<div id=\"livecodes-app\"></div>\n<p>...other page content</p>\n"
},
"script": {
"language": "vue",
"content": "<template>I'm a Vue SFC</template>"
}
}
};
return (<LiveCodes {...options}></LiveCodes>);
}
<script setup>
import LiveCodes from "livecodes/vue";
const options = {
"config": {
"markup": {
"language": "html",
"content": "<h1>Custom Root Element</h1>\n<div id=\"livecodes-app\"></div>\n<p>...other page content</p>\n"
},
"script": {
"language": "vue",
"content": "<template>I'm a Vue SFC</template>"
}
}
};
</script>
<template>
<LiveCodes v-bind="options" />
</template>
<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';
let options = $state({
"config": {
"markup": {
"language": "html",
"content": "<h1>Custom Root Element</h1>\n<div id=\"livecodes-app\"></div>\n<p>...other page content</p>\n"
},
"script": {
"language": "vue",
"content": "<template>I'm a Vue SFC</template>"
}
}
});
let container = $state(null);
onMount(() => {
createPlayground(container, options);
});
</script>
<div bind:this="{container}"></div>
Language Info
Name
vue
Extensions
.vue
, .vue3
Editor
script
, markup
Compiler
The official @vue/compiler-sfc.
Version
@vue/compiler-sfc
: v3.4.31
Using Prettier.
Limitations
Currently, Vue support has the following limitations:
PRs are welcome.
Starter Template
https://livecodes.io/?template=vue
Links