Tresjs/docs/.vitepress/theme/components/StackBlitzEmbed.vue

<script setup lang="ts">
import type { EmbedOptions } from '@stackblitz/sdk'
import sdk from '@stackblitz/sdk'
import { ref, watch } from 'vue'

const props = withDefaults(
  defineProps<{
    projectId: string
    options: EmbedOptions
  }>(),
  {
    options: {
      openFile: 'src/components/TheExperience.vue',
      view: 'preview',
      forceEmbedLayout: true,
      hideExplorer: true,
      hideNavigation: true,
    },
  },
)

const embed = ref(null)
const isSnippetLoaded = ref(false)

watch(
  () => embed.value,
  (value) => {
    if (value) {
      sdk.embedProjectId(value, props.projectId, props.options)
    }
  },
)
</script>

<template>
  <div
    ref="embed"
    class="stackblitz-embed"
  >
    <div
      v-if="!isSnippetLoaded"
      class="text-gray-500 text-2xl"
    >
      Loading...
    </div>
  </div>
</template>

<style>
.stackblitz-embed {
  margin: 2rem 0;
  border-radius: 8px;
  overflow: hidden;
  border: none;
  min-height: 500px;
}
</style>