|
4 | 4 | [](https://travis-ci.org/vue-styleguidist/vue-docgen-api)
|
5 | 5 | [](https://github.com/semantic-release/semantic-release)
|
6 | 6 |
|
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. |
8 | 8 |
|
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. |
10 | 10 |
|
11 | 11 | ## Install
|
12 | 12 |
|
13 | 13 | Install the module directly from npm:
|
14 | 14 |
|
15 |
| -``` |
| 15 | +``` sh |
16 | 16 | npm install vue-docgen-api --save-dev
|
17 | 17 | ```
|
18 | 18 |
|
@@ -40,7 +40,7 @@ var componentInfo = parse(filePath)
|
40 | 40 |
|
41 | 41 | ## Using JSDoc tags
|
42 | 42 |
|
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. |
44 | 44 |
|
45 | 45 | ## Example
|
46 | 46 |
|
@@ -371,101 +371,14 @@ we are getting this output:
|
371 | 371 | }
|
372 | 372 | ```
|
373 | 373 |
|
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 |
| - |
461 | 374 | ## Events
|
462 | 375 |
|
463 | 376 | ```js
|
464 | 377 | /**
|
465 | 378 | * Success event.
|
466 | 379 | *
|
467 | 380 | * @event success
|
468 |
| - * @type {object} |
| 381 | + * @property {object} example the demo example |
469 | 382 | */
|
470 | 383 | this.$emit('success', {
|
471 | 384 | demo: 'example'
|
@@ -495,8 +408,3 @@ The change log can be found on the [Releases page](https://github.com/vue-styleg
|
495 | 408 | [Rafael Escala](https://github.com/rafaesc92)
|
496 | 409 |
|
497 | 410 | 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