sfc.vue

<script setup>
import { inject } from 'vue'

const props = defineProps({
  example: {
    type: String,
    required: true,
  },
})

/**
 * @type { Record<string, Record<string, string>> }
 */
const examples = inject('repl-content', {})

const content = examples[props.example]

const encoded =
  typeof window !== 'undefined' &&
  content &&
  window.btoa(JSON.stringify(content))
// console.log(encoded)
</script>
<template>
  <div class="slidev-layout default">
    <div class="grid justify-items-stretch items-center w-full h-full">
      <slot />

      <div class="overflow-hidden text-center self-end">
        <iframe
          v-if="encoded"
          :src="`https://sfc.vuejs.org/#${encoded}`"
          frameborder="0"
          width="960"
          height="460"
          class="-mt-14 mb-2"
        ></iframe>
      </div>
    </div>
  </div>
</template>