Generate Docs

How to do it?

Run the following command in the root directory:

vuese gen

At this time, you will find the src directory in the docs project root directory as follows:

root
├── src
├──├── components
├──├──├── Button.vue
├──├──├── ButtonGroup.vue
├── docs
├──├── index.html
├──├── src
├──├──├── Button.md
├──├──├── ButtonGroup.md

Vuese retrieves the data and annotations from slots, props, methods and events and for the component itself directly from the code. This data will be concatenated to the current docs in the Nuxt proyect that contain more details and examples.

In the nuxt.config.js there is a hook that allows you to modify the contents of a file before it is handled by the parsers.

...
hooks: {
  'content:file:beforeParse': async (file) => {
    if (file.extension !== '.md') return

    const filename = path.basename(file.path, path.extname(file.path))
    if (filename === 'index') return

    let srcDocContent = "";
    const omegaFilePath = path.join(srcPath, path.basename(file.path));
    if (fs.existsSync(omegaFilePath)) {
      srcDocContent = await readFile(omegaFilePath, 'utf8');
      srcDocContent = srcDocContent.toString('UTF8').split('\n').slice(1).join('\n');
    }

    file.data = `${file.data}\r\n${srcDocContent}`;
  }
}

Run the following command in the docs root directory:

npx nuxt generate

npm run generate

Enjoy the docs!