Vue.js - Embed Swagger UI inside a Vue component?

Question

I have a form in my Vue component which uploads the api file. Now I want to render the contents of the file like this:

I have imported swagger client library: https://github.com/swagger-api/swagger-ui. Now, here

is an example of how you do it in a static page. But I need to do it inside a Vue component (or Quasar, specifically), so I do it like that:

Register swagger-ui inside my register components file:

<link rel="stylesheet" type="text/css" href="swagger-ui.css">

Now it is available as:

this.swaggerUI({})

anywhere in my components. Inside my component I have a div in a template to render the api file:

<template>
    <q-form>here lies q-file element, submit button and other stuff</q-form>
    <div id="swagger-ui"></div>
</template>

In the mentioned question he had something like:

<script>
  window.onload = function() {
    const ui = SwaggerUIBundle({
      url: "https://yourserver.com/path/to/swagger.json",
      dom_id: '#swagger-ui',
      presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIStandalonePreset
      ]
    })

    window.ui = ui
  }
</script>

Here's the difference: first of all, no window.onload, I must render it on submit button. Then, I deal with an uploaded file stored in my model, so no URL here. Now, I don't get how to make it work with locally stored file, when I try with the remote url, it gives me:

vue.esm.js?a026:628 [Vue warn]: Error in v-on handler: "Invariant Violation: _registerComponent(...): Target container is not a DOM element."

Answer 1

I was getting a similar error (Target container is not a DOM element) trying to use a static swagger spec. Instead of using window.onload, I found that Vue has the mounted() function, so this Vue 3 file worked for me:

<template>
    <div class="swagger" id="swagger"></div>
</template>

<script>
import SwaggerUI from 'swagger-ui';
import 'swagger-ui/dist/swagger-ui.css';

export default {
    name: "Swagger",
    mounted() {
        const spec = require('../path/to/my/spec.json');
        SwaggerUI({
            spec: spec,
            dom_id: '#swagger'
        })
    }
}
</script>