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.cn/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',
    },
    proxy: 'https://proxy.scalar.com',
    searchHotKey: 'k',
    showSidebar: true,
    pathRouting: {
      basePath: '/scalar',
    },
    spec: {
      url: 'https://cdn.jsdelivr.net.cn/npm/@scalar/galaxy/dist/latest.yaml',
    },
  },
})

对于多个参考，请传入一个配置对象的数组，这些对象扩展了基本配置。

export default defineNuxtConfig({
  modules: ['@scalar/nuxt'],
  scalar: {
    darkMode: true,
    metaData: {
      title: 'API Documentation by Scalar',
    },
    proxy: 'https://proxy.scalar.com',
    configurations: [
      {
        spec: {
          url: 'https://cdn.jsdelivr.net.cn/npm/@scalar/galaxy/dist/latest.yaml,
        },
        pathRouting: {
          basePath: '/yaml',
        },
      },
      {
        spec: {
          url: 'https://cdn.jsdelivr.net.cn/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