vue-metainfo-loader
This loader extracts from SFC:
- Component description
- Component name
- Component props
- name
- description
- type
- default
- validator
- required
- Component events
- name
- payload
Configuring
Open your webpack config and add following lines to rules.
test: /\.vue$/ loaders: 'vue-metainfo-loader' enforce: 'pre'
It adds loader in order to run before vue-loader and extract component's meta. These lines are equal to:
test: /\.vue$/ loaders: 'vue-loader' 'vue-metainfo-loader'
Usage
For example, you have a component
Awesome Counter {{ counter }} + -
You'll get next meta
; const meta = Componentmeta; console; // My awesome counter!console; // propsconsole; // eventsconsole; // customTypesconsole; // name in declaration or filename without .vue console;/* { customTypes: [], description: 'My Awesome Counter', events: [ { description: 'counter was requested to increment', name: 'increment', payload: 'string', }, { description: 'counter was requested to decrement', name: 'decrement', payload: 'string', }, ], props: [ { default: { description: 'just an empty array', value: '() => []' }, description: 'array of counters names', name: 'counters', type: 'Array', validator: { description: 'check if all values are strings', value: `validator(counters) { return counters.every(counter => typeof counter === 'string'); }`, }, }, ],} */
More examples you can see here
Custom JSDoc types
We support jsdoc typedefs with following limitation:
- Section
Using @typedef to document a complex type for a class
is not supported at all. It's not supported by VSCode, so you should use this format at real world.
If you want to present optional parameter you should write something like below (look at description
property definition)
/** * multiline * @typedef {{ * title: string, * description: (string | undefined), * type: Object, * name: string * }} MultiLineWithManyProps */
All defined typedefs stored in customTypes
property of resulting metainfo.