Generate documentation markdown files from VueJs components using the vue-docgen-api.
(opens new window) (opens new window)
# InstallInstall the module directly from npm:
# UsageIn a terminal window, navigate to the root of your project, then type the following command.
If your components are in the src/components folder, this will generate one .md file per component.
vue-docgen can take two nameless arguments. The components glob to locate components and the destination directory.
-w or --watch
Should vue-docgen watch for modifications of your components and update generated markdown files accordingly?
#-c or --configFile
Specify the path of your configuration file. By default, docgen will look for docgen.config.js in the current folder.
Create a docgen.config.js at the root of your project to avoid having to specify command-line arguments everytime.
All of the command-line arguments, except for the --config, can be replaced by lines in the docgen.config.js file.
In a config file you can even be more specific. Each of the following configurations is optional.
# componentstype:
string | string[], default:"src/components/**/[a-zA-Z]*.{vue,js,jsx,ts,tsx}"
Glob string used to get all the components to parse and document.
# outDirtype:
string, default:"docs"
The root directory for the generation of the markdown files
# outFiletype:
string, optional
If you specify this, all documentation will be generated in one single page. The path of this file is relative to the outDir.
The following configuration will generate one single file: myDocs/components.md
type:
string, default:path.dirname(configFilePath)
The folder where CLI will start searching for components. Since the folder structure will be kept from source to destination, it avoids having uselessly deep scaffoldings.
If you simply use src/components/**/[A-Z]*.vue as source glob and docs as outDir, you will get this.
Specifying componentsRoot: 'src/components' and using **/[A-Z].vue will skip the two useless levels of hierarchy.
type:
DocGenOptions, optional
Allows you to give vue-docgen-api (opens new window) some config. Most notably, you can specify wether your components contain JSX code and the alias configured in your webpack.
# getDocFileNametype:
(componentPath: string) => string, default:(componentPath) => path.resolve(path.dirname(componentPath), 'Readme.md')
By default it will find the Readme.md sibling to the component files. Use this to point docgen to the files that contain documentation specific to a component.
type:
(file: string, config: DocgenCLIConfig) => string, default:(file, config) => path.resolve(config.outDir, file).replace(/\.\w+\$/, '.md')
Function returning the absolute path of the documentation markdown files. If outFile is used, this config will be ignored.
# watchtype:
boolean, default:false
Should vue-docgen keep on watching your files for changes once the first files are generated?
# templatestype:
Templates, optional
An object specifying the functions to be used to render the components.
For example:
file: component.ts
And the partial for slots
# pagestype:
Array<DocgenCLIConfig>, optional
Allows to group components into pages. Each page will inherit its parent properties.
# defaultExamplestype:
boolean, default:false
Generate an example for components that have neither <docs> block nor a markdown file to provide examples of usage.
type:
string, optional
Force the Current Working Directory. Useful in monorepos.
# getRepoEditUrltype:
(relativePath: string) => string, default:p => `https://github.com/${config.docsRepo}/edit/${branch}/${dir}/${p}`
Gets the link to the documentation edition from
# docsRepotype:
string, optional
If you specify the docsRepo, and you do not want to specify getRepoEditUrl you will get links to edit the docs near each readme files.
type:
string, default:master
The branch you want the edit links to send you to
# docsFoldertype:
string, default: ``
If the root folder is not at the root of your repo, use this parameter
# editLinkLabeltype:
string, default:Edit on github
The label we can read on edit button
# Change logThe change log can be found on the Changelog Page.
Bart Ledoux (opens new window)
MIT License.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4