Blinking Error when Using loadSpec()

[wndisra]

Hi @mrin9.

I've been trying to use RapiDoc as open API YAML spec viewer with no luck for last few days. I'm using it with below code.

<template>
    <div>
        <rapi-doc style="height:100vh; width:100%" ref="specref" render-style="read" :spec-url="specurl">
        </rapi-doc>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import { parse } from 'yaml'

const route = useRoute()
const specurl = ref('')
const specref = ref(null)
const apiPath = route.params.path.join('/')
const config = useRuntimeConfig()

specurl.value = apiPath

// const path = `/repositories/${apiPath}`
const path = `OAI/OpenAPI-Specification/main/examples/v3.0/api-with-examples.yaml`
let { data: spec, error: err } = await useAsyncData('spec', () => $fetch(path, {
    method: 'GET',
    baseURL: 'https://raw.githubusercontent.com',
    headers: {
    },
    params: {}
}))

onMounted(() => {
    let apispec = specref.value
    let data = parse(spec.value)
    apispec.loadSpec(data)
})
</script>

The API spec loads for about 1 sec and then redirected automatically to error page (unable to load spec) immediately after.

Stacks:

• Nuxt 3 and VueJS
• RapiDoc 9.3.4
• NPM

Please help. Thanks in advance.

[prassie]

Won't it be simpler/easier to use a simple static html like this: https://rapidocweb.com/examples/api-demo.html ?