OpenApiDocs Nuxt 模組文件

簡介

OpenApiDocs Nuxt 模組旨在將 OpenAPI 文件無縫整合到 Nuxt.js 應用程式中，同時支援 Nuxt 2.x 和 3.x。它利用 Vue.js 組件來動態渲染 OpenAPI 規格。此模組非常適合希望將 API 文件直接嵌入到其 Nuxt.js 專案中的開發人員。

適用於靜態和伺服器目標

套件版本資訊

文件與支援

• 版本資訊： 此模組與各種 Nuxt 版本相容，並根據版本支援特定功能。
• 文件： 瀏覽完整文件
• 發行說明： 瀏覽變更日誌
• 示範與範例： 查看線上示範
• 線上範例： StackBlitz 互動範例
• 本地化： 探索本地化功能
• 外掛程式： 了解外掛程式
• 自訂頁面： 自訂頁面概覽
• 開發與自訂： 開發與自訂指南

功能

• 支援 Nuxt 2.x 和 3.x：適用於 Nuxt 的兩個主要版本。
• 動態文件渲染：使用 Vue.js 組件自動渲染 OpenAPI 規格。
• 可自訂：提供多種選項來自訂文件設定。
• 本地化支援：與 i18n 外掛程式整合以支援多語言。
• 開發工具：包含模組開發和自訂的工具與設定。

安裝

快速設定

1. 將模組新增至您的專案:

  npx nuxi@latest module add nuxt-openapi-docs-module

2. 在您的 Nuxt 設定中設定模組:

適用於 Nuxt 3

export default defineNuxtConfig({
 modules: [
   'nuxt-openapi-docs-module'
 ]
})

適用於 Nuxt 2

module.exports = {
 modules: [
   'nuxt-openapi-docs-module',
 ],
}

3. 建立 OpenAPI 文件夾:

• 預設資料夾：'docs/openapi'
• 或者，使用模組設定中的 'folder' 選項指定自訂資料夾。

設定

透過修改 'nuxt.config.js' 或 'nuxt.config.ts' 檔案來自訂模組

module.exports = {
  modules: [
    [
      'nuxt-openapi-docs-module',
      {
        folder: './docs/openapi',
        name: 'OpenApiDocs',
        files: function() { return { 'News-API': 'News API' } },
      }
    ],
  ],
  // Additional configurations...
}

選項

• 'folder'：包含 OpenAPI 規格檔案的資料夾路徑。
• 'name'：主要組件的名稱。
• 'files'：傳回物件的函式，將檔案名稱對應到顯示名稱。
• 'debug'：啟用偵錯模式以將資訊列印到主控台。
• 'list'：切換文件列表的顯示。
• 'locales'：定義支援的語系。
• 'logo'：SVG 格式的自訂標誌。
• 'footer'：自訂頁尾內容。