LiveCodes has good support for Vue SFC. However, there was a limitation that it can have only 1 component (in the script editor). Which did not allow to show the usage of the component with props, etc, specially in embedded playgrounds.

Please note that LiveCodes does not allow having a file system. It only has 3 editors (markup, style and script) which when combined produce the result page. This is similar to CodePen and JSFiddle and unlike CodeSandbox and StackBlitz.

This is not an issue with other frameworks like React and Solid since they use functions (or classes) as components and a single file can have many of these. In Vue (and Svelte) the SFC format allows only 1 component per file.

Vue can use functions as inline components, but this is not common and has limitations:

// define inline component
function Greeting(props: {name?: string}) {
  return <h1>Hello, { props.name || 'World' }!</h1>
}

So, recently (not yet released), Vue and Svelte were added as supported languages in markup editor.
This allows having 2 components. And when using editor configuration options like title and order, this can give the impression of a file system for demo purposes. Note that the style editor can also be hidden using the hideTitle option.

demo: https://dev.livecodes.io/?x=id/3ve9mtihj99&mode=result
src: https://dev.livecodes.io/?x=id/3ve9mtihj99
screenshot:

createPlayground('#container', {
  appUrl: 'https://dev.livecodes.io',
  config: {
    activeEditor: 'script',
    markup: {
      language: 'vue',
      content: components.app, // component code as string
      title: 'App.vue',
    },
    script: {
      language: 'vue',
      content: components.counter, // component code as string
      title: 'Counter.vue',
    },
    style: {
      language: 'css',
      content: 'body {\n  background-color: #f5f5f5; \n}\n',
      title: 'styles.css',
      order: 3,
      // hideTitle: true,
    },
  }
})

The App.vue component can have code like this:

<script setup lang="tsx">
import Counter from './Counter.vue'; // notice the relative import
</script>

<template>
  <Counter name="Vue" />
</template>

Current Limitations and Planned Tasks

• Currently, the defineProps() macro cannot infer props from TypeScript types.
  LiveCodes compiles TypeScript (and other languages) in the component blocks before passing this code to Vue compiler. This allows using other languages supported in LiveCodes (e.g. ts + pug + scss) (see demo).
  To support this we need to allow Vue compiler to use our TS compiler to infer types and declare props. (fixed by Vue: infer props from types #779 )

• Better editor support can be provided using volar and Vue language tools as used in Vue REPL. (fixed by Monaco-Volar #776 )

• When using TailwindCSS, classes used in the component are detected and produce the needed CSS. However, code in style blocks are not currently processed. This is already discouraged by TailwindCSS, but still it might be an expected behaviour. (fixed by Process blocks #765 )

Opinions and help are highly appreciated.

cc: @logaretm @ismail9k