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'：自訂頁尾內容。