nuxt-openapi-docs-module

OpenApiDocs Nuxt Module

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

Package Version Information

Version	Supported Nuxt Version
3.0	2.x and 3.x
4.0	2.x and 3.x
5.0	3.x
5.2	> 3.7

for nuxt 3 need add vite.config.ts

import { defineConfig } from "vite";

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

• ✨  Release Notes
• 🛠 Demo

Quick Setup

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

npx nuxi@latest module add nuxt-openapi-docs-module

1. 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',
  ],
}

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

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

Configuration

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
• locales: array wit enabled locales, Default: ['en'] Support: ['en', 'fr', 'de', 'ru', 'ch', 'es', 'hi', 'ar', 'zh', 'pt']
• logo: svg logo in string
• footer: doc footer

Folder Structure

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

docs/
    openapi/
        api1.yaml
        api2.yaml

Localization

wiki

Plugin

wiki

Development

wiki

Custom pages

wiki

Changelog

[5.2.4] - 2024-05-04

Changed

• use lodash.template directly to compile template(#22) @danielroe