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."

You need Swagger UI not Swagger JS. Does this answer your question - [How to embed Swagger UI to a webpage?](https://stackoverflow.com/q/46237255/113116) — Helen, Apr 08 '20 at 12:14
@Helen No, it's actually not. First of all, I have a Vue component, so I can't just stick function expression in a window object. Secondly, I don't have the URL, because the file I want to render is uploaded by the user right in the form above, so I need to pass a file or blob into the swagger ui. Maybe I should update my question, because it leaves too much space for assumption as of now — tnsaturday, Apr 08 '20 at 12:49

score 5 · Answer 1 · answered Jan 13 '21 at 05:19

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>

score 2 · Accepted Answer · answered Jan 15 '21 at 14:30

2

This one appeared to be a simple yet very unobvious typo: in windows.onload function:

dom_id: '#swagger-ui',

must instead be

dom_id: 'swagger-ui',

without hash sign, that's it!

answered Jan 15 '21 at 14:30

tnsaturday

527
2
10
31

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

2 Answers2