Vue 3 SFC

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

JS

import { createPlayground } from 'livecodes';

const options = {
  "template": "vue"
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "template": "vue"
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "template": "vue"
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "template": "vue"
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

const options = {
  "template": "vue"
};
let container;
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

Run in LiveCodes

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

Run in LiveCodes

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) and that required directives are added to the style editor.

See example below.

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

Run in LiveCodes

JSX

JSX can be used in render functions without needing any configuration.

Run in LiveCodes

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:

Run in LiveCodes

Module imports can be customized using import maps as described in module resolution documentations.

Importing Vue SFCs

Other 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):

Run in LiveCodes

- view source on GitHub

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "import": "id/2af5rqradrs"
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "import": "id/2af5rqradrs"
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "import": "id/2af5rqradrs"
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "import": "id/2af5rqradrs"
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

const options = {
  "import": "id/2af5rqradrs"
};
let container;
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"
  }
}

Run in LiveCodes

- view source on GitHub

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "import": "id/d72xp4wbinp"
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "import": "id/d72xp4wbinp"
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "import": "id/d72xp4wbinp"
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "import": "id/d72xp4wbinp"
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

const options = {
  "import": "id/d72xp4wbinp"
};
let container;
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. Otherwise, if that element is not found, a new div element is added to document.body and is used to mount the instance.

Language Info

Name

vue

Extensions

.vue, .vue3

Editor

script

Compiler

The official @vue/compiler-sfc.

Version

@vue/compiler-sfc: v3.4.31

Code Formatting

Using Prettier.

Limitations

Currently, SSR is not supported.

Starter Template

https://livecodes.io/?template=vue

Links

• Vue.js
• Vue SFC specs
• CSS Modules