vue-docgen-loader



This package allows parsing Vue component file with vue-docgen-api then injecting the result into the output file.

Getting Started

First, install the loader and vue-docgen-api.

``sh
$ yarn add -D vue-docgen-loader vue-docgen-api


or npm

$ npm i -D vue-docgen-loader vue-docgen-api

`

Then add the loader to your webpack config file.
Please make sure to run the loader at the last of the loader chain.

`js
import MyComponent from './my-component.vue'

Vue.extend({
// You can use the components as usual
components: { MyComponent }
})
`

`js
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
{
// You also can put this loader above, but I recommend to use
// a separeted rule with enforce: 'post' for maintainability
// and simplicity. For example, you can enable the loader only
// for development build.
test: /\.vue$/,
use: 'vue-docgen-loader',
enforce: 'post'
}
]
},
plugins: [new VueLoaderPlugin()]
}
`

If you want to apply this loader to non-SFC files like below, you also need to
setup a rule for them. This works only with vue-docgen-api >= 4.0.0.

`js
// my-button.js
import Vue from 'vue'

export const MyButton = Vue.extend({
props: {
foo: {
type: String
}
},
template: ''
})
`

`js
// other.js
import MyButton from './my-button.js?component'
`

`js
// webpack.config.js
module.exports = {
module: {
rules: [
// Please make sure to apply the loader only for Vue components: In this
// sample, only modules imported with ?component query will match.
//
// IMPORTANT!
// Do not use ?vue query if you're using vue-loader. It will sliently inject
// .js?vue rule into rules array and it breaks the module.
{
test: /\.js$/,
resourceQuery: /component/,
use: 'vue-docgen-loader',
enforce: 'post'
}
]
}
}
`

Options

You can pass options for vue-docgen-api through docgenOptions and specify the property name the loader inject docgen result at.

`js
{
test: /\.vue$/,
loader: 'vue-docgen-loader',
options: {
docgenOptions: {
// options for vue-docgen-api...
},
// Injected property name
injectAt: '__docgenInfo' // default
},
enforce: 'post'
}
``

Contributing

Please read our contributing guidelines.

CONTRIBUTING