Search code examples
vue.jsswaggerswagger-ui

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

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: swagger-ui example

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

  • 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!