Product
Introducing Ruby Support in Socket
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
vue-docgen-loader
Advanced tools
The vue-docgen-loader is a webpack loader for generating documentation from Vue.js components. It integrates with vue-docgen-api to extract information from Vue components and produce documentation in various formats.
Generate Documentation
This feature allows you to generate documentation for your Vue components by adding vue-docgen-loader to your webpack configuration. The loader processes .vue files and extracts documentation information.
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-docgen-loader',
options: {
docgenOptions: {
alias: {
'@': './src'
}
}
}
}
]
}
};
Customizing Documentation Output
This feature allows you to customize the output of the documentation by specifying custom slots and props. This can be useful for tailoring the documentation to your specific needs.
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-docgen-loader',
options: {
docgenOptions: {
alias: {
'@': './src'
},
customSlots: ['slotName'],
customProps: ['propName']
}
}
}
]
}
};
Vue Styleguidist is a tool for creating style guides for Vue components. It provides a live playground for your components and supports documentation generation. Compared to vue-docgen-loader, Vue Styleguidist offers a more comprehensive solution for creating and maintaining component libraries with live examples.
Vue Docgen API is a library for extracting documentation from Vue components. It is the underlying library used by vue-docgen-loader. While vue-docgen-api focuses on the extraction of documentation data, vue-docgen-loader integrates this functionality into the webpack build process.
This package allows parsing Vue component file with vue-docgen-api then injecting the result into the output file.
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'
}
]
}
}
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'
}
Please read our contributing guidelines.
FAQs
Vue docgen loader for webpack
We found that vue-docgen-loader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.