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

Using npm :

npm install -D vue-x-docs

Using yarn:

yarn add -D vue-x-docs

(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" ],

⚠️ 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 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.

     /**  * @component Cart  * @lifecycle mounted do some stuff  */ 

  • @route : show the routes matched by this component. Not supported by default JSDoc template.

  See 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

(jsdoc page - configuration)

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

You can customize some of the doc behavior

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

Default: true

"templates": { "useCollapsibles": true }

Default: true

"templates": { "separateMembers": true }

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 

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