Vue Docs REPL implementation via SFC Playground #30

Activity

1. kiaking

   added

   enhancementNew feature or requestNew feature or request

   help wantedExtra attention is neededExtra attention is needed

   on Jul 27, 2021
2. kiaking commented on Jul 27, 2021

   

   kiaking

   on Jul 27, 2021

   MemberAuthor

   More actions

   @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?
3. antfu commented on Jul 27, 2021

   

   antfu

   on Jul 27, 2021

   Member

   More actions

   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>
   ```
4. LinusBorg commented on Jul 27, 2021

   

   LinusBorg

   on Jul 27, 2021

   Member

   More actions

   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
5. kiaking commented on Jul 27, 2021

   

   kiaking

   on Jul 27, 2021

   Last edited by kiaking

   MemberAuthor

   More actions

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

   👍React with 👍1Reacted by Thorsten Lünborg
6. LinusBorg commented on Jul 27, 2021

   

   LinusBorg

   on Jul 27, 2021

   Member

   More actions

   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

   👀React with 👀1Reacted by Kia King