scalar
Scalar API Reference Nuxt Module
This plugin provides an easy way to render a beautiful API reference based on a OpenAPI/Swagger file with Nuxt.
Quick Setup
Install the module to your Nuxt application with one command:
npx nuxi module add @scalar/nuxt
That's it! You can now use @scalar/nuxt in your Nuxt app ✨
Configuration
If you are using nuxt server routes you can enable scalar simply by enabling openAPI in the nitro config in your nuxt.config.ts
export default defineNuxtConfig({
modules: ['@scalar/nuxt'],
nitro: {
experimental: {
openAPI: true,
},
},
})
If you would like to add your own OpenAPI spec file you can do so with the following minimal config
export default defineNuxtConfig({
modules: ['@scalar/nuxt'],
scalar: {
spec: {
url: 'https://cdn.jsdelivr.net/npm/@scalar/galaxy/dist/latest.yaml',
},
},
})
By default the docs will be hosted at /scalar
but you an easily customize that, here's a more in
depth config example.
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/npm/@scalar/galaxy/dist/latest.yaml',
},
},
})
For multiple references, pass in an array of configuration objects which extend on top of the base config.
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/npm/@scalar/galaxy/dist/latest.yaml,
},
pathRouting: {
basePath: '/yaml',
},
},
{
spec: {
url: 'https://cdn.jsdelivr.net/npm/@scalar/galaxy/dist/latest.json',
},
pathRouting: {
basePath: '/json',
},
},
],
},
})
Troubleshooting
If you come across any **** not default export
errors, its likely you are using pnpm
.
A temporary fix for this would be to enable shamefully-hoist until
we sort out what is causing the package issues.
To do this, just create a .npmrc
file in your project root and fill it with:
shamefully-hoist=true