Tradeinsights-vue3-generator NPM

TradeInsights Vue3 Generator

It is a library for generating documentation for Vue3 components.

Tech

It uses several open source projects to function properly:

Vue3 - Framework for web apps
VitePress - SSG framework for Vue3
commander - Solution for node.js command-line interfaces
vue-docgen-api - Turns VueJs components into documentation objects

And of course TradeInsights Vue3 Generator itself is open source with a public repository on GitHub.

Installation

TradeInsights Vue3 Generator requires Node.js v16+ to run.

Add the parameters below in package.json:

{
  "trade-insights-docs": {
    "components": "./src/components",
    "docs": "./docs/components",
    "sidebar": "./docs/.vitepress/sidebar.json"
  }
}

Note: components: points to the folder with Vue3 components. docs: points to the folder where the documentation files will be created. sidebar: points to the file where the items will be added to the sidebar.

Install global package:

npm i -g tradeinsights-vue3-generator

cd project

npm add -D vitepress
npx vitepress init

trade-insights-docs

Add the parameters below in docs/.vitepress/config.mjs:

const itemsSidebar = () => {
  return JSON.parse(fs.readFileSync(`${path.dirname(__filename)}/sidebar.json`, 'utf8'));
}

export default defineConfig({
    sidebar: [
      {
        text: 'Components',
        items: itemsSidebar()
      }
    ],
});