通过 100 多个技巧学习 Nuxt!

scalar
@scalar/nuxt

使用 Nuxt 基于 OpenAPI/Swagger 文件渲染精美的 API 参考。

Scalar API 参考 Nuxt 模块

VersionDownloadsLicenseDiscord

此插件提供了一种简单的方法,使用 Nuxt 基于 OpenAPI/Swagger 文件渲染精美的 API 参考。

Screenshot of an API Reference

快速设置

使用一条命令将模块安装到您的 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',
    },
    proxyUrl: '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',
    },
    proxyUrl: '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