@scalar/api-reference v1.22.24
Scalar API Reference
Generate interactive API documentations from Swagger files. Try our Demo
Installation
npm install @scalar/api-reference
Usage
<script setup>
import { ApiReference } from '@scalar/api-reference'
</script>
<template>
<ApiReference />
</template>
You can even mount the component in React.
Configuration
There’s a configuration object that can be used on all platforms. In Vue.js, you use it like this:
isEditable?: boolean
Whether the Swagger editor should be shown.
<ApiReference :configuration="{ isEditable: true }" />
spec.content?: string
Directly pass an OpenAPI/Swagger spec.
<ApiReference :configuration="{ spec: { content: '{ … }' } }" />
spec.url?: string
Pass the URL of a spec file (JSON or Yaml).
<ApiReference :configuration="{ spec: { url: '/openapi.json' } }" />
proxyUrl?: string
Making requests to other domains is restricted in the browser and requires CORS headers. It’s recommended to use a proxy to send requests to other origins.
<ApiReference :configuration="{ proxy: 'https://proxy.example.com' }" />
ℹ️ You can use @scalar/api-client-proxy to host your own proxy or you can just use ours:
<ApiReference
:configuration="{ proxy: 'https://api.scalar.com/request-proxy' }" />
showSidebar?: boolean
Whether the sidebar should be shown.
<ApiReference :configuration="{ showSidebar: true } />
hideModels?: boolean
Whether models (components.schemas
or definitions
) should be shown in the sidebar, search and content.
@default false
<ApiReference :configuration="{ hideModels: true } />
hideDownloadButton?: boolean
Whether to show the "Download OpenAPI Specification" button
@default false
<ApiReference :configuration="{ hideDownloadButton: true } />
customCss?: string
You can pass custom CSS directly to the component. This is helpful for the integrations for Fastify, Express, Hono and others where you it’s easier to add CSS to the configuration.
In Vue or React you’d probably use other ways to add custom CSS.
<script setup>
const customCss = `* { font-family: "Comic Sans MS", cursive, sans-serif; }`
</script>
<template>
<ApiReference :configuration="{ customCss }" />
</template>
searchHotKey?: string
Key used with CTRL/CMD to open the search modal (defaults to 'k' e.g. CMD+k)
<ApiReference :configuration="{ searchHotKey: 'l'} />
metaData?: object
You can pass information to the config object to configure meta information out of the box.
<ApiReference :configuration="{
metaData: {
title: 'Page title',
description: 'My page page',
ogDescription: 'Still about my my page',
ogTitle: 'Page title',
ogImage: 'https://example.com/image.png',
twitterCard: 'summary_large_image',
//Add more...
}
} />
hiddenClients?: array
You can pass an array of httpsnippet clients to hide from the clients menu.
<ApiReference :configuration="{
hiddenClients: ['fetch']
} />
By default hides Unirest, pass []
to show all clients
onSpecUpdate?: (spec: string) => void
You can listen to spec changes with onSpecUpdate that runs on spec/swagger content change
<ApiReference :configuration="{
onSpecUpdate: (value: string) => {
console.log('Content updated:', value)
}
} />
authentication?: Partial
To make authentication easier you can prefill the credentials for your users:
<ApiReference :configuration="{
authentication: {
// The OpenAPI file has keys for all security schemes:
// Which one should be used by default?
preferredSecurityScheme: 'my_custom_security_scheme',
// The `my_custom_security_scheme` security scheme is of type `apiKey`, so prefill the token:
apiKey: {
token: 'super-secret-token',
},
},
} />
```
For OpenAuth2 it’s more looking like this:
```js
<ApiReference :configuration="{
authentication: {
// The OpenAPI file has keys for all security schemes
// Which one should be used by default?
preferredSecurityScheme: 'planets_auth',
// The `petstore_auth` security scheme is of type `oAuth2`, so prefill the client id and the scopes:
oAuth2: {
clientId: 'foobar123',
// optional:
scopes: ['read:planets', 'write:planets'],
},
},
} />
```
#### withDefaultFonts?: boolean
By default we’re using Inter and JetBrains Mono, served by Google Fonts. If you use a different font or just don’t want to use Google Fonts, pass `withDefaultFonts: false` to the configuration.
```js
<ApiReference :configuration="{
withDefaultFonts: false
} />
```
1 day ago
6 days ago
7 days ago
7 days ago
8 days ago
9 days ago
9 days ago
11 days ago
12 days ago
13 days ago
13 days ago
14 days ago
15 days ago
15 days ago
15 days ago
16 days ago
16 days ago
16 days ago
20 days ago
19 days ago
19 days ago
19 days ago
23 days ago
22 days ago
25 days ago
26 days ago
26 days ago
30 days ago
29 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago