Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pocka/vue-docgen-loader
Vue docgen loader for webpack
https://github.com/pocka/vue-docgen-loader
loader vue vue-docgen-api webpack
Last synced: 4 days ago
JSON representation
Vue docgen loader for webpack
- Host: GitHub
- URL: https://github.com/pocka/vue-docgen-loader
- Owner: pocka
- License: mit
- Created: 2019-11-14T05:49:54.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-29T06:22:06.000Z (3 months ago)
- Last Synced: 2025-01-12T19:06:51.363Z (11 days ago)
- Topics: loader, vue, vue-docgen-api, webpack
- Language: JavaScript
- Size: 83 KB
- Stars: 13
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# vue-docgen-loader
[](https://github.com/pocka/vue-docgen-loader/actions)
[](https://github.com/pocka/vue-docgen-loader/actions)
[](https://www.npmjs.com/package/vue-docgen-loader)
[](https://www.npmjs.com/package/vue-docgen-loader)
This package allows parsing Vue component file with [vue-docgen-api](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/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](./CONTRIBUTING.md)