MISC
Swagger UI를 Vue UI로 구성해보기
woonizzooni
2021. 6. 2. 18:33
Swagger UI의 index.html을 참고해서,
https://github.com/swagger-api/swagger-ui/blob/master/dist/index.html
<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swagger UI</title>
<link rel="stylesheet" type="text/css" href="./swagger-ui.css" />
<link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
<style>
html
{
box-sizing: border-box;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
*,
*:before,
*:after
{
box-sizing: inherit;
}
body
{
margin:0;
background: #fafafa;
}
</style>
</head>
<body>
<div id="swagger-ui"></div>
<script src="./swagger-ui-bundle.js" charset="UTF-8"> </script>
<script src="./swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
<script>
window.onload = function() {
// Begin Swagger UI call region
const ui = SwaggerUIBundle({
url: "https://petstore.swagger.io/v2/swagger.json",
dom_id: '#swagger-ui',
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
});
// End Swagger UI call region
window.ui = ui;
};
</script>
</body>
</html>
아래와 같이 작성하니, 일단(?) 된다...
$ npm install swagger-ui
./src/views/swagger/swagger.vue
<template>
<div class="main-container">
<div id="swagger-ui"></div>
</div>
</template>
<script>
import SwaggerUIBundle from "swagger-ui";
import SwaggerUIStandalonePreset from "swagger-ui/dist/swagger-ui-standalone-preset";
import "swagger-ui/dist/swagger-ui.css";
export default {
name: "swagger",
mounted: function () {
const ui = SwaggerUIBundle({
urls: [
{
url: "https://****A.com/api/v1.0/docs/doc.json",
name: "AAAA",
},
{
url: "https://****B.com/api/v1.0/docs/doc.json",
name: "BBBB",
},
{
url: "https://****C.com/api/v1.0/docs/doc.json",
name: "CCCC",
},
{
url: "https://****D.com/api/v1.0/docs/doc.json",
name: "DDDD",
}
],
dom_id: "#swagger-ui",
deepLinking: true,
presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
plugins: [SwaggerUIBundle.plugins.DownloadUrl],
layout: "StandaloneLayout",
});
window.ui = this.ui;
},
};
</script>
<style lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
</style>