This plugin provides an easy way to render a beautiful API reference based on a OpenAPI/Swagger file with Nuxt.
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 ✨
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.scalar.com/spec/openapi_petstore.json',
},
},
})
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://api.scalar.com/request-proxy',
searchHotKey: 'k',
showSidebar: true,
pathRouting: {
basePath: '/scalar',
},
spec: {
url: 'https://cdn.scalar.com/spec/openapi_petstore.json',
},
},
})