Skip to main content

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
import { createPlayground } from 'livecodes';

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

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

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.

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

- view source on GitHub

show code
import { createPlayground } from 'livecodes';

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

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"
}
}
- view source on GitHub

show code
import { createPlayground } from 'livecodes';

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

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