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.
$ 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.
import MyComponent from './my-component.vue'
Vue.extend({
// You can use the components as usual
components: { MyComponent }
})
// 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.
// my-button.js
import Vue from 'vue'
export const MyButton = Vue.extend({
props: {
foo: {
type: String
}
},
template: '<button/>'
})
// other.js
import MyButton from './my-button.js?component'
// 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.
{
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