Vue

by Nick Hulea

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.23.0/swagger-ui-bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.23.0/swagger-ui-bundle.js.map"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.23.0/swagger-ui-standalone-preset.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.23.0/swagger-ui-standalone-preset.js.map"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.23.0/swagger-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.23.0/swagger-ui.css.map"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.23.0/swagger-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.23.0/swagger-ui.js.map"></script>
<div id="app">
  <h1>
    Swagger Example
  </h1>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  props: {
  
  },
  data: {
    url: "https://api.inaturalist.org/v1/swagger.json",
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    },
    log() {
    
    }
  },
  mounted: function() {
  console.log(SwaggerUi)
        let self = this;
        window.swaggerUi = new SwaggerUi({
        url: self.url,
        dom_id: "swagger-ui-container",
        supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
        onComplete: function(swaggerApi, swaggerUi){
          if(typeof initOAuth == "function") {
            initOAuth({
              clientId: "your-client-id",
              clientSecret: "your-client-secret-if-required",
              realm: "your-realms",
              appName: "your-app-name",
              scopeSeparator: ",",
              additionalQueryStringParams: {}
            });
          }

          if(window.SwaggerTranslator) {
            window.SwaggerTranslator.translate();
          }
        },
        onFailure: function(data) {
          log("Unable to Load SwaggerUI");
        },
        docExpansion: "none",
        jsonEditor: false,
        defaultModelRendering: 'schema',
        showRequestHeaders: false
      });

      window.swaggerUi.load();
  }
})