Skip to content

Latest commit

 

History

History
142 lines (103 loc) · 4.5 KB

README.md

File metadata and controls

142 lines (103 loc) · 4.5 KB

npm version npm downloads NPM license npm type definitions donate GitHub Repo stars

OpenApiDocs Nuxt Module

logo

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

for nuxt 3 need add vite.config.ts

import { defineConfig } from "vite";

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

white image

white image 2

black image

mobile image

Quick Setup

  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
  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']

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