Vue Docs REPL implementation via SFC Playground

[kiaking]

trafficstars

The plan is to enable REPL on the docs via SFC Playground instead of codepen (initial idea from Evan).

Now, how can we embed SFC Playground...? 👀

[kiaking]

@LinusBorg I heard you were able to embed SFC Playground into Slidev 👀 Is it true? If so, can same technique applied to VitePress as well?

[antfu]

I think this will do:

<iframe src="https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuXHRIaSBLaWEgOilcbjwvdGVtcGxhdGU+In0=" />

Ideally we could have some custom syntax to extend the markdown and transform to the iframe with corresponding hash via a simple Vite plugin. Like

```vue {repl}
<template>
  <h1>{{ msg }}</h1>
</template>

<script setup>
const msg = 'Hello World!'
</script>
```

[LinusBorg]

Yes I did, in a crude kind of way:

• iframe
• encode code in base64 and append to url
• use some CSS for positioning

https://github.com/LinusBorg/slidev-theme-vuetiful/blob/main/layouts/sfc.vue

The most hackish part is using negative margins to move the playground's header out of the way. We could instead add a URL parameter to the playground to have it render without the header and other cruft we don't want while embedding.

Also, a simple iframe might not be what we cant in the docs as it won't be able to adjust hight-wise to the different examples

[kiaking]

Oh cool, seems like embedding is quite straight forward.

We could instead add a URL parameter to the playground to have it render without the header and other cruft we don't want while embedding.

This is definitely great idea 👍

Also, a simple iframe might not be what we cant in the docs as it won't be able to adjust hight-wise to the different examples.

Hm. We can adjust the iframe height by css right...? So maybe import component and set height via props might work? 🤔

<SFCPlayground height="320px" />

[LinusBorg]

Oh, btw, here's how I imported the src snippets in slidev - might be able to do this differently in vitepress:

• import examples .vue files as raw strings
• collect them in a map object
• provide them to the app, inject them in the SFC slide layout (the one linked above)

https://github.com/LinusBorg/slidev-theme-vuetiful/blob/main/setup/main.ts