Standalone Output Component

[phantomlsh]

As initially discussed here, for both the standalone and the embedded use cases, you could consider extracting the Output component whose only purpose is to show compiled results or preview. Store data like files and importmap could be provided through the prop.

Then it's possible to use any favorable editor(monaco or codemirror) with the Output component, and we could use the Output component alone as a readonly preview of a project.

[phantomlsh]

@yyx990803 Would you consider building such a component(package)? If so, I can contribute!

[CutePikachu]

That's a great idea. I am looking forward to it as well.

[wangcch]

Now we can use preview standalone in version ^4.5.1.
https://github.com/vuejs/repl?tab=readme-ov-file#advanced-usage

<script setup>
import { ref } from 'vue'
import { Sandbox, useStore } from '@vue/repl'

// retrieve some configuration options from the URL
const query = new URLSearchParams(location.search)

const store = useStore(
  {
    // custom vue version
    vueVersion: ref(query.get('vue')),
  },
  // initialize repl with previously serialized state
  location.hash,
)
</script>

<template>
  <Sandbox :store="store" />
</template>