OpenApiDocs Nuxt Module Documentation

Introduction

The OpenApiDocs Nuxt Module is designed to seamlessly integrate OpenAPI documentation into Nuxt.js applications, supporting both Nuxt 2.x and 3.x. It utilizes Vue.js components to render the OpenAPI specifications dynamically. This module is ideal for developers looking to embed API documentation directly into their Nuxt.js projects.

work with static and server target

Package Version Information

Documentation and Support

• Version Information: The module is compatible with various Nuxt versions, supporting specific features based on the version.
• Demo and Examples: View Live Demo
• Images: View Live Images
• Release Notes: Browse Change Log
• Live Example: Interactive Example on StackBlitz
• Localization: Explore Localization Features
• Plugin: Learn About Plugins
• Custom Pages: Custom Pages Overview
• Development and Customization: Guide to Development and Customization
• Module Overview: Module Overview

Features

• Support for Nuxt 2.x and 3.x: Works with both major versions of Nuxt.
• Dynamic Documentation Rendering: Automatically renders OpenAPI specifications using Vue.js components.
• Customizable: Offers several options to customize the documentation setup.
• Localization Support: Integrates with the i18n plugin for multi-language support.
• Development Tools: Includes tools and setups for development and customization of the module.

Installation

Quick Setup

1. Add the module to your project:

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

2. Configure the module in your Nuxt configuration:

For Nuxt 3:

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

For Nuxt 2:

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

3. Create the OpenAPI documentation folder:

• Default folder: 'docs/openapi'
• Alternatively, specify a custom folder using the 'folder' option in the module configuration.

Configuration

Customize the module by modifying the 'nuxt.config.js' or 'nuxt.config.ts' file:

const logo = readFileSync(`./assets/svg/logo.svg`);

module.exports = {
  modules: [
    [
      'nuxt-openapi-docs-module',
      {
        folder: './docs/openapi',  // Path to the folder containing OpenAPI specification files
        name: 'OpenApiDocs',       // Name of the main component
        files: function() {        // Function returning an object mapping file names to display names
          return { 
            'news-api': 'News API',
            'pages-api': 'Pages API docs' 
          }
        },
        debug: true,              // Enable debug mode to print information to the console
        list: true,               // Toggle the display of document listings
        locales: ['en', 'fr', 'es'],  // Define supported locales
        logo: logo.toString(), // Path to a custom logo in SVG format
        footer: '© 2024 Company Name. All rights reserved.'  // Custom footer content
      }
    ]
  ],
  // Additional configurations...
}

Options Table

Folder Structure

Place your OpenAPI specification files (e.g., 'api1.yaml'', 'api2.yaml') in the specified 'folder'.