Created from react styleguidist for Vue Components with a living style guide
MIT License
Bot releases are visible (Hide)
Published by vue-styleguidist-bot almost 6 years ago
Published by elevatebart about 6 years ago
Fix crlf issue blocking linux users
Published by elevatebart about 6 years ago
Published by rafaesc about 6 years ago
Published by rafaesc about 6 years ago
Example:
<script>
// Button.vue
/**
* This is a Button
* @version 1.0.5
*/
export default {
name: 'btn',
render() {
return <button>Click me</button>
}
}
</script>
Feature developed by @hellosean1025
Two new flags in the sections
config:
href
— An URL to navigate to instead of navigating to the section contentexternal
— If set, the link will open in a new windowPublished by rafaesc about 6 years ago
Published by rafaesc over 6 years ago
If you’re using vue-cli 3.x you can skip the webpack configuration 👍
Published by rafaesc over 6 years ago
Published by rafaesc over 6 years ago
Published by rafaesc over 6 years ago
If you need to have default data for use in the examples of your components, you can import mixins to the style guide. Creating a .js file that exports the mixins or adding it directly to the styleguide.config.js
file
Use mixins option to customize this behavior:
// mixin file
export default {
data() {
return {
colorDemo: 'blue',
sizeDemo: 'large'
}
}
/* ... */
}
// example component
<Button size="colorDemo" color="sizeDemo">
Lick Me
</Button>
If you need to load vue plugins from a third party. You can add it, creating a .js file that installs the plugins and then adds it into the styleguide.config.js
file
Use require option:
// styleguide/global.requires.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import VeeValidate from 'vee-validate'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(VueI18n)
Vue.use(VeeValidate)
Vue.use(Vuetify)
// styleguide.config.js
module.exports = {
require: [path.join(__dirname, 'styleguide/global.requires.js')]
}
If you need to change the root component of each preview example, you can change the root component of preview. Creating a .js file that exports the root component as jsx component and then adds it into the styleguide.config.js
file
Use renderRootJsx option:
// config/styleguide.root.js
import VueI18n from 'vue-i18n'
import messages from './i18n'
const i18n = new VueI18n({
locale: 'en',
messages
})
export default previewComponent => {
// https://vuejs.org/v2/guide/render-function.html
return {
i18n,
render(createElement) {
// v-app to support vuetify plugin
return createElement(
'v-app',
{
props: {
id: 'v-app'
}
},
[createElement(Object.assign(previewComponent))]
)
}
}
}
// styleguide.config.js
module.exports = {
renderRootJsx: path.join(__dirname, 'config/styleguide.root.js')
}
See an example of style guide with vuetify and vue-i18n.
Published by rafaesc over 6 years ago
If you import extends, for it to be documented you need to add in the header the mixin tag @mixin, for example
// src/extends/Base.vue
<template>
<div>
<h4>{{ color }}</h4>
<!--the appropriate input should go here-->
</div>
</template>
<script>
/**
* @mixin
*/
export default {
props: {
/**
* The color for the button example
*/
colorExtends: {
type: String,
default: '#333'
},
},
}
</script>
// src/components/Button/Button.vue
<template>
<!-- -->
</template>
<script>
import Base from '../../extends/Base.vue';
export default {
name: 'Button',
extends: Base,
props: {
/**
* The size of the button
* `small, normal, large`
*/
size: {
default: 'normal'
},
/**
* Add custom click actions.
**/
onCustomClick: {
default: () => () => null,
},
},
/* ... */
}
</script>
Published by rafaesc over 6 years ago
Styleguidist doesn’t support Node.js 4 anymore.
We’re now using mini-html-webpack-plugin and @vxna/mini-html-webpack-template instead of html-webpack-plugin.
This will make things like adding a favicon or fonts from Google Fonts much easier.
If you’re using a custom HTML template, you need to update your style guide config.
// < 1.6.0v
module.exports = {
template: './styleguie/template.html'
};
// 1.7.0v
module.exports = {
template: {
// This is just an example, there are many more available options
favicon: 'https://assets-cdn.github.com/favicon.ico'
}
};
See more in the docs.
server
method now returns an object containing a webpack Compiler instance and the Styleguidist server, see examples in the docs.
Webpack 4 support (#101 by @hgascoigne and with react-styleguidist merge)
Fixed errors (by @viljamis) and added the isolate for each component, so both components and sections, already is separate.
Example:
http://rafaelescala.com/vue-styleguide-navigation/#!/Getting%20Started
Source
module.exports = {
navigation: true
};
One more step to make by react-styleguidist usable for documenting open source projects:
New config option to enable the ribbon, define the URL and change the label:
module.exports = {
ribbon: {
url: 'http://example.com/',
text: 'Fork me on GitHub'
}
};
And two new theme variables to change colors: color.ribbonBackground
and color.ribbonText
Added support for the <style scoped>
tag in the single file component format (#93 by @mrjones2014)
Available since v1.6.x
Example:
```vue
<template>
<div class="wrapper">
<Button id="dog-name-button" @click.native="pushButton">Push Me</Button>
<hr />
<p class="text-name">Next Dog Name: {{ dogName }}</p>
</div>
</template>
<script>
const dogNames = require('dog-names').all;
// You can also use 'exports.default = {}' style module exports.
export default {
data() {
return { numClicks: 0, dogName: dogNames[0] };
},
methods: {
pushButton() {
this.numClicks += 1;
this.dogName = dogNames[this.numClicks];
}
}
}
</script>
<style scoped>
.wrapper {
background: blue;
}
.text-name {
color: red;
}
</style>
```
components
option should accept arrays.