Created from react styleguidist for Vue Components with a living style guide
MIT License
Bot releases are hidden (Show)
Published by rafaesc almost 7 years ago
Published by rafaesc almost 7 years ago
For default, Vue styleguidist doesn't document the slots, you need to add a comment before of slot inside of the template.
<template>
<div class="modal">
<div class="modal-container">
<div class="modal-head">
<!-- @slot Use this slot header -->
<slot name="head"></slot>
</div>
<div class="modal-body">
<!-- @slot Use this slot body -->
<slot name="body"></slot>
</div>
</div>
</div>
</template>
Published by rafaesc about 7 years ago
Published by rafaesc about 7 years ago
Published by rafaesc about 7 years ago
Published by rafaesc about 7 years ago
For events documentation
/**
* Success event.
*
* @event success
* @type {object}
*/
this.$emit('success', {
demo: 'example',
})
If you want to create a custom v-model, you have to add model
tag in comment
<script>
export default {
name: 'my-checkbox',
props: {
/**
* @model
*/
value: String
}
}
</script>
Published by rafaesc about 7 years ago
<docs></docs>
inside *.vue
files, so that styleguidist builds the readme. You can review the following example (#18)Published by rafaesc about 7 years ago
Any code block with a language tag of js
, jsx
or javascript
will be rendered as a Vue component with a interactive playground.
Vue component example:
```jsx
<Button size="large">Push Me</Button>
```
One more with generic code fence:
```
<Button size="large">Push Me</Button>
```
You can disable an editor by passing a `noeditor` modifier:
```jsx noeditor
<Button>Push Me</Button>
```
To render an example as highlighted source code add a `static` modifier:
```jsx static
<Button>Push Me</Button>
```
You can also initialize vue to construct more complex examples
```js
const names = require('dog-names').all;
new Vue({
data(){
return {
list: names
}
},
template: `
<div>
<RandomButton :variants="list" />
</div>
`
})
```
Examples with all other languages are rendered only as highlighted source code, not an actual component:
```html
<Button size="large">Push Me</Button>
```
Fenced code blocks without a language or indented code blocks are rendered as before: with an interactive playground.
A custom example
language for fenced code blocks was removed.
You can customize this behavior with the new updateExample
config option. For example you can use it to load examples from files:
module.exports = {
updateExample: function(props) {
const { settings, lang } = props;
if (typeof settings.file === 'string') {
const filepath = settings.file;
delete settings.file;
return {
content: fs.readFileSync(filepath),
settings,
lang,
}
}
return props;
}
};
Use it like this in you Markdown files:
```js { "file": "./some/file.js" }
```
Webpack 2+ is required now.
Published by rafaesc over 7 years ago
Published by rafaesc over 7 years ago
Published by rafaesc over 7 years ago
Published by rafaesc over 7 years ago
Published by rafaesc over 7 years ago
Published by rafaesc over 7 years ago
Published by rafaesc over 7 years ago
Published by rafaesc over 7 years ago
Updated dependency vue-docgen-api and docs
Published by rafaesc over 7 years ago
Update repository
Published by rafaesc over 7 years ago
Update project
Published by rafaesc over 7 years ago
Update project
Published by rafaesc over 7 years ago
Initial project