vue-docgen-vetur

Generate vetur component data for your vue component library.

Installation

yarn add --dev vue-docgen-vetur

Usage

Run the generator from your project: vue-docgen-vetur.

The resulting files are generated into the current directory per default. The input and output directory can be customized by passing them as arguments:

vue-docgen-vetur -o dist/json src/components/**/*.vue

The input supports the glob syntax. See fast-glob for details.

For convenience, this call can be added to the scripts in the package.json:

{
  "scripts": {
    "build:meta": "vue-docgen-vetur -o dist/json"
  }
}

For Vetur to detect the generated files, add another section to the package.json:

{
  "vetur": {
    "tags": "dist/json/tags.json",
    "attributes": "dist/json/attributes.json"
  }
}

Example

Relevant data is parsed from the documentation of your components. Given this component:

<template>
  <div>{{ text }}</div>
</template>

<script>
/**
 * My component
 */
export default {
  props: {
    /**
     * The text to display
     */
    text: {
      type: String,
      default: "Hello",
    },
  },
}
</script>

Vetur shows autocompletion:

| Component | Prop | | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | | | |