unplugin-components-doc

Powered by unplugin.

组件库可视化文档插件，自动扫描并解析组件属性和注释信息生成文档。允许你在页面上动态修改组件属性，并实时预览渲染结果。借助 AI 生成组件说明，进一步解放双手。

A tool that scans your project's components, automatically parses their props and comments to generate documentation. It allows you to dynamically modify component properties on a web page and preview the rendered results in real-time. With AI-generated component descriptions, it takes automation to the next level and frees up your hands even further.

🌈 特性

• 🍰 开箱即用，轻松集成到现有的开发环境，无需编写任何额外代码
• 😃 自动扫描项目中的组件，无需手动配置
• 🪐 允许你动态交互和修改组件属性，即时查看渲染结果
• 🦾 代码注释即可解析为组件说明，无需编写 Markdown
• ✨ AI 生成有意义的描述，确保文档始终信息详实
• 🌈 支持 Vue、React 等主流前端框架，适用于各种项目

🌈 Features

• 🍰 Out-of-the-box solution and easy to without any extra code
• 😃 Automatically scans components in your project with zero manual configuration
• 🪐 Enables dynamic interaction and modification of component props while instantly previewing the rendering results
• 🦾 Converts code comments directly into component documentation, eliminating the need for writing Markdown files
• ✨ AI-powered meaningful descriptions ensure your documentation stays detailed and up-to-date
• 🌈 Supports major frontend frameworks like Vue and React, suitable for various projects

📦 Installation

npm i unplugin-components-doc -D

// vite.config.ts
import Docs from 'unplugin-components-doc/vite'

export default defineConfig({
  plugins: [
    Docs({ /* options */ }),
  ],
})

// rollup.config.js
import Docs from 'unplugin-components-doc/rollup'

export default {
  plugins: [
    Docs({ /* options */ }),
  ],
}

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-components-doc/webpack')({ /* options */ })
  ]
}

// nuxt.config.js
export default defineNuxtConfig({
  modules: [
    ['unplugin-components-doc/nuxt', { /* options */ }],
  ],
})

This module works for both Nuxt 2 and Nuxt Vite

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-components-doc/webpack')({ /* options */ }),
    ],
  },
}

// esbuild.config.js
import { build } from 'esbuild'
import Docs from 'unplugin-components-doc/esbuild'

build({
  plugins: [Docs()],
})