Swagger UI integration (Spring Boot + Vuejs)

DIsplaySwagger.vue

<template>
    <Loading :loading="loading" :text="$t('common.loading')" />
    <v-card v-if="module" class="mt-6 pt-4 px-6">
    <v-card-actions>
      <span class="text-h4 font-weight-bold">{{ module.toUpperCase() }} API Description</span>
      <v-spacer />
      <v-btn variant="flat" color="primary" @click="loadSwagger">{{ $t('common.reload') }}</v-btn>
    </v-card-actions>
    <v-divider class="mt-4"/>
    <v-card-text>
      <div class="swagger" :id="module + 'swagger'"></div>
    </v-card-text>
  </v-card>
</template>
<script setup>
import { SwaggerUIBundle } from "swagger-ui-dist"
import 'swagger-ui-dist/swagger-ui.css';
import Loading from "@/components/common/Loading.vue";
import {useApi} from "@/composables/useApi";
import {ref} from "vue";

const props = defineProps(['module'])

let panel = ref([])
let loading = ref(true)

loadSwagger()

function loadSwagger() {
  let api = useApi();
  // this api calls /v3/api-docs to get YAML desc (spec variable in .thent())
  api.$support.getSwaggerSpec(props.module)
    .then(spec => SwaggerUIBundle({
      spec: spec,
      dom_id: `#${props.module}swagger`,
      presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIBundle.SwaggerUIStandalonePreset,
      ],
    }))
    .finally(() => loading.value = false)
}
</script>

package.json

...
  "dependencies": {
      ...
      // add swagger-ui dependency
      "swagger-ui-dist": "^4.18.1",
      ...
  }
...

pom.xml

...
    <!-- Add spingdoc dependency -->
    <!-- this will expose /swagger-ui.html endpoint which display Swagger UI -->
    <!-- and /v3/api-docs which returns the YAML description of your REST APIs -->
    <dependency>
        <groupId>org.springdoc</groupId>
        <artifactId>springdoc-openapi-starter-webflux-ui</artifactId>
        <version>${springdoc-openapi-starter-webflux-ui.version}</version>
    </dependency>
...