###### tags: `swagger`、`nuxt`

**套件-Swagger**
===

## Nuxt3專案

**npx nuxi init 專案名稱**
**node version：20.11.0**

#### 套件
**npm install swagger-ui
npm install swagger-ui-dist**

#### 參考文件
https://www.npmjs.com/package/swagger-ui
https://www.npmjs.com/package/swagger-ui-dist

#### html

<template>
  <div class="importSwagger" style="width: 50%; margin: 10px auto; text-align: center;">
    <div id="swagger-ui" color="#f00"></div>
  </div>
</template>

#### script
* url：openAPI 的網址　
* dom_id：對應到標籤的id
* spec：如果是靜態檔案，而不是使用url，請用此參數

<script setup>
import { SwaggerUIBundle, SwaggerUIStandalonePreset } from 'swagger-ui-dist'
import 'swagger-ui-dist/swagger-ui.css'

onMounted(()=>{
  const ui = SwaggerUIBundle({
  url: "https://data.moa.gov.tw/openapi.json",
  spec: 靜態檔案位置,
  dom_id: '#swagger-ui',
  presets: [
    SwaggerUIBundle.presets.apis,
    SwaggerUIStandalonePreset
  ],
  layout: 'StandaloneLayout'
})
})

</script>

#### style
預設的swagger ui，會有一些我們沒用到的UI介面，就沒讓它出現了

<style>
.topbar {
  display: none;
}
.info {
  display: none;
}
.models {
  display: none !important;
}
.float-right {
  display: none;
}

</style>

#### 畫面參考