This plugin is for generating a component catalog of Vue.js. The catalog page is generated by adding it to the VuePress plugin.
This plugin is for VuePress Next(v1.x.x).
Available in 2 steps.
$ yarn add -D vuepress@next vuepress-plugin-component-catalog
.vuepress/config.js
module.exports = {
// ...
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{ text: 'Components', link: '/components/' },
]
},
plugins: [
['vuepress-plugin-component-catalog'],
],
};
Scan the project and complete the setup automatically.
Depending on the project it may not work.
This plugin uses custom blocks of SFC.
<docs>
# Base Button
Can be written with Markdown.
VuePress markdown extensions are also available.
[[toc]]
When you write a component, it will be mounted and displayed.
<base-button>Smaple Button</base-button>
<docs>
<template>
<button type="button"><slot /></button>
</template>
<script>
export default {
// ...
}
</script>
module.exports = {
plugins: [
[
'vuepress-plugin-component-catalog',
{
// All options
rootDir: '<your project root dir>',
include: ['**/components/**'] // Specify the target to create a catalog
exclude: ['**/views/**', '**/App.vue'] // Specify a target that does not create a catalog
distDirPrefix: 'components',
alias: { // import path alias
'@': \<your project alias\>,
},
vueCli: { // vue cli option
configPath: path.join(PROJECT_DIR, 'vue.config.js'),
},
nuxt: { // nuxt option
configPath: path.join(PROJECT_DIR, 'nuxt.config.js'),
},
},
],
],
};
- type:
string
- default:
process.cwd()
Specify the target to create a catalog. Can use glob.
- type:
string
orArray<string>
e.g.
{
include: ['**/components/**'],
}
Specify a target that does not create a catalog. Can use globs.
- type:
string
orArray<string>
- type:
string
- default:
components
It becomes the URL path.
http://localhost:8080/components/your-component
- type:
string
- default:
process.cwd() + vue.config.js
Please try to set it when the alias such as @
can not be resolved automatically.
- type:
string
- default:
process.cwd() + nuxt.config.js
Please try to set it when the alias such as @
(~
) can not be resolved automatically.
It is not possible to process docs
custom blocks, and errors may occur in the build of your application.
Please load and use the prepared webpack loader. Here is a sample.
vue.config.js
module.exports = {
// ...
chainWebpack: config => {
config.module
.rule('docs')
.oneOf('docs')
.resourceQuery(/blockType=docs/)
.use('through-loader')
.loader('vuepress-plugin-component-catalog/dist/through-loader')
.end();
},
};
nuxt.config.js
module.exports = {
// ...
build: {
extend(config) {
config.module.rules.push({
resourceQuery: /blockType=docs/,
loader: 'vuepress-plugin-component-catalog/dist/through-loader',
});
},
},
};
Please use .vuepress/enhancedApp.js
.
In the future, if you are using Nuxt.js, it will be loaded automatically.
Please use VuePress Build Pipeline.
Refer to the project in the example directory.
Sorry, I haven't tried it yet. I'm planning to make samples.
Probably I will use .vuepress/enhancedApp.js
.
See example directory.
There is such an idea.