Vue 3

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from "vue";

const props = defineProps<{ apiKey: string }>();
const containerRef = ref<HTMLElement | null>(null);
let script: HTMLScriptElement | null = null;

onMounted(() => {
  script = document.createElement("script");
  script.src = "https://widgets.medos.one/v2/unified.js";
  script.async = true;
  script.onload = () => {
    (window as any).MedosBooking?.init({
      apiKey: props.apiKey,
      mode: "inline",
      containerId: "medos-booking-vue",
      theme: "default",
    });
  };
  document.body.appendChild(script);
});

onBeforeUnmount(() => {
  script?.remove();
});
</script>

<template>
  <div id="medos-booking-vue" ref="containerRef" style="min-height: 600px" />
</template>

<MedosBooking api-key="mk_your_publishable_key" />