Scalar API 參考文件 Nuxt 模組

此插件提供一個簡單的方式，使用 Nuxt 渲染基於 OpenAPI/Swagger 檔案的美觀 API 參考文件。

快速設定

使用一個指令將模組安裝到您的 Nuxt 應用程式

npx nuxi module add @scalar/nuxt

就這樣！您現在可以在您的 Nuxt 應用程式中使用 @scalar/nuxt ✨

設定

如果您正在使用 nuxt 伺服器路由，您可以透過在您的 nuxt.config.ts 的 nitro 設定中啟用 openAPI 來簡單地啟用 scalar

export default defineNuxtConfig({
  modules: ['@scalar/nuxt'],
  nitro: {
    experimental: {
      openAPI: true,
    },
  },
})

如果您想要加入您自己的 OpenAPI 文件，您可以使用以下最簡配置來完成

export default defineNuxtConfig({
  modules: ['@scalar/nuxt'],
  scalar: {
    spec: {
      url: 'https://cdn.jsdelivr.net/npm/@scalar/galaxy/dist/latest.yaml',
    },
  },
})

預設情況下，文件將託管在 /docs，但您可以輕鬆自訂，以下是一個更深入的配置範例。

export default defineNuxtConfig({
  modules: ['@scalar/nuxt'],
  scalar: {
    darkMode: true,
    hideModals: false,
    hideDownloadButton: false,
    metaData: {
      title: 'API Documentation by Scalar',
    },
    proxyUrl: 'https://proxy.scalar.com',
    searchHotKey: 'k',
    showSidebar: true,
    pathRouting: {
      basePath: '/scalar',
    },
    spec: {
      url: 'https://cdn.jsdelivr.net/npm/@scalar/galaxy/dist/latest.yaml',
    },
  },
})

對於多個參考文件，請傳入配置物件的陣列，這些物件會擴展在基本配置之上。

export default defineNuxtConfig({
  modules: ['@scalar/nuxt'],
  scalar: {
    darkMode: true,
    metaData: {
      title: 'API Documentation by Scalar',
    },
    proxyUrl: 'https://proxy.scalar.com',
    configurations: [
      {
        spec: {
          url: 'https://cdn.jsdelivr.net/npm/@scalar/galaxy/dist/latest.yaml,
        },
        pathRouting: {
          basePath: '/yaml',
        },
      },
      {
        spec: {
          url: 'https://cdn.jsdelivr.net/npm/@scalar/galaxy/dist/latest.json',
        },
        pathRouting: {
          basePath: '/json',
        },
      },
    ],
  },
})

對於主題設定，您可以將 `theme 屬性傳遞到配置物件。預設主題是 `nuxt，但您也可以傳遞 `default 來使用預設主題。

export default defineNuxtConfig({
  modules: ['@scalar/nuxt'],
  scalar: {
    theme: 'nuxt',
  },
})

疑難排解

如果您遇到任何 `**** not default export 錯誤，很可能是您正在使用 `pnpm。一個暫時的解決方案是啟用 shamefully-hoist，直到我們找出導致套件問題的原因。

要做到這一點，只需在您的專案根目錄中建立一個 `.npmrc 檔案並填入

shamefully-hoist=true