This module provides a simple way to display OpenAPI documentation in a Nuxt.js 2 & 3 application. It allows you to define an OpenAPI specification file and renders it using a set of reusable Vue.js components.

work with static and server target

for nuxt 3 need add vite.config.ts

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    rollupOptions: {
      external: ["vue/server-renderer"],
    },
  },
});

• ✨  Release Notes
• 🛠 Demo

1. Add nuxt-openapi-docs-module dependency to your project

# Using yarn
yarn add --dev nuxt-openapi-docs-module

# Using npm
npm install --save-dev nuxt-openapi-docs-module

2. Add nuxt-openapi-docs-module to the modules section of nuxt.config.ts

nuxt 3

export default defineNuxtConfig({
  modules: [
    'nuxt-openapi-docs-module'
  ]
})

nuxt 2

module.exports = {
  modules: [
    'nuxt-openapi-docs-module',
  ],
}

3. create docs/openapi folder in root project dir(not src) or change path - folder parameter

4. You can use Vue Devtools "Routes" section to see new routes.

You can customize the behavior of the module by providing options in the nuxt.config.js file.

module.exports = {
modules: [
    [
        'nuxt-openapi-docs-module',
        {
            folder: './docs/openapi',
            name: 'OpenApiDocs',
            files: function() {return { 'News-API': 'News API'}},
        }
    ],
],
// ...
}

• folder (default: ./docs/openapi): the folder where your OpenAPI specification files are located.
• name (default: OpenApiDocs): the name of the main component used to render the OpenAPI documentation.
• path: the component url for docs.
• files: function with files list in OpenApiDocs folder, files: function() {return { 'News-API': 'News API'}}.
• debug: print debug information to console, Default: false
• list: Toggling the list of documents, Default: false

The default folder structure for your OpenAPI specification files should look like this:

docs/
    openapi/
        api1.yaml
        api2.yaml

wiki

wiki

wiki

wiki