Embed OpenAPI Docs in a Vue 3 App

GetMan doesn’t need a Vue-specific wrapper package. Since it’s a single script that attaches window.GetMan, a small Composition API component covers mounting, remounting on prop change, and cleanup with onUnmounted.

The component

<script setup>
import { useTemplateRef, onMounted, onUnmounted, watch } from 'vue';

const props = defineProps({ specUrl: String });

const container = useTemplateRef('container');
let unmount = null;

async function mount() {
  if (unmount) { unmount(); unmount = null; }
  if (!window.GetMan) {
    await new Promise((resolve) => {
      const s = document.createElement('script');
      s.src = 'https://cdn.getman.dev/latest/getman-ui.js';
      s.onload = resolve;
      document.head.appendChild(s);
    });
  }
  unmount = window.GetMan.launch(
    container.value,
    { url: props.specUrl }
  );
}

onMounted(mount);
watch(() => props.specUrl, mount);
onUnmounted(() => unmount?.());
</script>

<template>
  <div ref="container" style="height: 100vh" />
</template>

The watch() on specUrl means the same component instance can swap specs — useful for a page that lets users pick between multiple internal APIs — by re-running mount() and discarding the previous instance first.

Options API

If your codebase hasn’t migrated to <script setup>, the same logic works in data() / mounted() / beforeUnmount() — the only Vue-specific pieces are the lifecycle hook names, not anything about how GetMan itself is loaded or mounted.

Nuxt

Nuxt renders components server-side by default, and window doesn’t exist during SSR. Wrap the component in <ClientOnly> (built into Nuxt) or guard the script-loading logic with if (process.client) so it only runs in the browser.

Other frameworks

See the React version of this guide or the Angular version if part of your app uses a different framework — the underlying GetMan.launch() call is identical across all three, only the lifecycle hooks differ.