vue-x-docs v1.0.3

vue(x)docs

Live example: https://delni.github.io/vue-x-docs/

A JSDoc extension for Vue and Vuex based projects. This include jsdoc template & new tag definition.

• Install
• Tags
• Template - Config
• Special Thanks

Install

Using npm :

npm install -D vue-x-docs

Using yarn:

yarn add -D vue-x-docs

Tags

Usage

(jsdoc page - configuration)

"plugins": ["node_modules/vue-x-docs"],

If you use other plugins, put them before vue(x)docs. I would recommend jsdoc-vue to parse *.vue files, and markdown plugin from jsdoc:

"plugins": [
	"plugins/markdown",
	"node_modules/jsdoc-vue",
	"node_modules/vue-x-docs"
],

Definition

:warning: Some tags will only be available with the template, as it redefined some of JSDoc core functionnality. In those case, a fallback tag is defined

• @store
  Define a vuex store.
  Compatibility with vanilla JSDoc: fallback as @module.

  	* `@namespaced` allow to precise that this vuex module is namespaced
  	* `@actions`, `@mutations`, `@getters`, fallback as `@method`. `@actions` are automaticaly tagged as `async`
  
  	See [warehouse-module.js](https://github.com/Delni/vue-x-docs/blob/master/demo/src/warehouse-module.js) for usage in context

• @component
  Define a vue component.
  Compatibility with vanilla JSDoc: fallback as @module. data from this component should be tagged @member

  	* `@computed`: fallback as `@member`. Tag computed data
  	* `@vprop`: fallback as `@member`. Tag props from actual data
  	* `@watch`: define a special `method` for watchers.
  	* `@lifecycle`: document lifecycles hooks by providing its name. Not supported by default JSDoc template.
  		```javascript
  		/**		
  		 * @component Cart
  		 * @lifecycle mounted do some stuff
  		 */		 
  		```
  	* `@route` : show the routes matched by this component. Not supported by default JSDoc template.
  
  	See [cart.vue](https://github.com/Delni/vue-x-docs/blob/master/demo/src/cart.vue) for usage in context

• @model Synonyme of @module, use to describe file that make the actual call to API, if you need.
  See goods.js for usage in context

Template

Config

(jsdoc page - configuration)

"opts": {
    "template": "node_modules/vue-x-docs"
}

You can customize some of the doc behavior

Logo

"templates": {
    "logo": {
        "url": "https://vuejs.org/images/logo.png",
        "width": "25px",
        "height": "25px",
        "link": "https://github.com/Delni/vue-x-docs"
    }
}

Use collapsible api list

Default: true

"templates": {
    "useCollapsibles": true
}

Separates data, props and computed by a title

Default: true

"templates": {
    "separateMembers": true
}

Use versioning tree output

Default: false

"templates": {
    "useVersionning": false
}

By default, output tree will be at the root of the output dir provided in conf, say out, you will have

out/
├─ <generated documentation tree>
└─ index.html

By enabling useVersionning, vue(x)doc will use your package.json information to add "version layer". Say your package.json looks like { "name": "myproject", "version": "v1.0.0", ... }, output tree will be :

out/
└─ myproject/
 	└─ v1.0.0/
		├─ <generated documentation tree>
		└─ index.html

Special Thanks

This project is not an official fork, but is widely inspired by TUI JSDoc Template for some functionnality and template customization.