Skip to content
This repository was archived by the owner on Mar 8, 2019. It is now read-only.

Commit 7e7aa89

Browse files
committed
update readme.md
BREAKING CHANGE: `comment` properties (containing the full extract of each leading comment (with all the `/**` and the ` * `) are entirely removed from the documentation as they were not useful. Use `description` or `tags` instead. BREAKING CHANGE: Events that are not commented near their call will not anymore be parsed. If you want to document events, do it as a leading comment before your event call
1 parent 1e66572 commit 7e7aa89

File tree

1 file changed

+5
-97
lines changed

1 file changed

+5
-97
lines changed

README.md

Lines changed: 5 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
[![Build Status](https://travis-ci.org/vue-styleguidist/vue-docgen-api.svg?branch=master)](https://travis-ci.org/vue-styleguidist/vue-docgen-api)
55
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
66

7-
`vue-docgen-api` is a toolbox to help extracting information from [Vue][] components, and generate documentation from it.
7+
`vue-docgen-api` is a toolbox to help extracting information from [Vue](https://vuejs.org/) components, and generate documentation from it.
88

9-
Use [babel][] and [jsdoc-api][] to compile the code and analyze the contents of the component extracting methods and props. The output is a JavaScript object.
9+
Use [@babel/parser](https://babeljs.io/docs/en/babel-parser) to parse the code and analyze the contents of the component extracting methods, props events and slots. The output is a JavaScript object.
1010

1111
## Install
1212

1313
Install the module directly from npm:
1414

15-
```
15+
``` sh
1616
npm install vue-docgen-api --save-dev
1717
```
1818

@@ -40,7 +40,7 @@ var componentInfo = parse(filePath)
4040

4141
## Using JSDoc tags
4242

43-
You can use the following [JSDoc][] tags when documenting components, props and methods.
43+
You can use [JSDoc][] tags when documenting components, props and methods.
4444

4545
## Example
4646

@@ -371,101 +371,14 @@ we are getting this output:
371371
}
372372
```
373373

374-
## Mixins or Extends
375-
376-
If you import a [mixin](https://vuejs.org/v2/guide/mixins.html) or [extends](https://vuejs.org/v2/api/#extends), for it to be documented you need to add in the header the mixin tag **@mixin**, for example
377-
378-
Case Mixin:
379-
380-
```javascript
381-
// src/mixins/colorMixin.js
382-
383-
/**
384-
* @mixin
385-
*/
386-
module.exports = {
387-
props: {
388-
/**
389-
* The color for the button example
390-
*/
391-
color: {
392-
type: String,
393-
default: '#333'
394-
}
395-
}
396-
}
397-
```
398-
399-
Case Extends:
400-
401-
```vue
402-
// src/extends/Base.vue
403-
404-
<template>
405-
<div>
406-
<h4>{{ color }}</h4>
407-
<!--the appropriate input should go here-->
408-
</div>
409-
</template>
410-
<script>
411-
/**
412-
* @mixin
413-
*/
414-
export default {
415-
props: {
416-
/**
417-
* The color for the button example
418-
*/
419-
colorExtends: {
420-
type: String,
421-
default: '#333'
422-
}
423-
}
424-
}
425-
</script>
426-
```
427-
428-
```html
429-
<template>
430-
<!-- -->
431-
</template>
432-
<script>
433-
// src/components/Button/Button.vue
434-
435-
import colorMixin from '../../mixins/colorMixin'
436-
import Base from '../../extends/Base'
437-
export default {
438-
name: 'buttonComponent',
439-
mixins: [colorMixin],
440-
extends: Base,
441-
props: {
442-
/**
443-
* The size of the button
444-
* `small, normal, large`
445-
*/
446-
size: {
447-
default: 'normal'
448-
},
449-
/**
450-
* Add custom click actions.
451-
**/
452-
onCustomClick: {
453-
default: () => () => null
454-
}
455-
}
456-
/* ... */
457-
}
458-
</script>
459-
```
460-
461374
## Events
462375

463376
```js
464377
/**
465378
* Success event.
466379
*
467380
* @event success
468-
* @type {object}
381+
* @property {object} example the demo example
469382
*/
470383
this.$emit('success', {
471384
demo: 'example'
@@ -495,8 +408,3 @@ The change log can be found on the [Releases page](https://github.com/vue-styleg
495408
[Rafael Escala](https://github.com/rafaesc92)
496409

497410
MIT License.
498-
499-
[jsdoc]: http://usejsdoc.org/
500-
[vue]: https://vuejs.org/
501-
[babel]: https://www.npmjs.com/package/babel-core
502-
[jsdoc-api]: https://www.npmjs.com/package/jsdoc-api

0 commit comments

Comments
 (0)