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',
},
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