quick and easy documentation of Vue.js components - DEPRECATED
quick and easy documentation of Vue.js components
npm install --save propdoc
This example was solely generated based on the extra fields described below.
propdoc proposes a new way of documenting Vue components, by including some (or all) of the documentation in the component itself.
Benefits:
Downsides:
description
and token
This example showcases all of what propdoc would parse, however, none are required to be used and will not be output if absent.
export default {
name: 'checkbox',
introduction: 'an amazing checkbox',
description: `
This \`checkbox\` is amazing, you should _check_ it out.
`,
token: "<checkbox label='foo'></checkbox>",
props: {
label: {
type: String,
default: '',
note: "a label to be appended after the checkbox"
}
}
}
note is used alongside expanded (object-style) props to describe that prop in more detail
a brief summary of what the component is or does
a more in-depth documentation of the component, will be parsed using Markdown. Note that code will need to be escaped if it's inside of a Javascript string literal.
a quick example of the component's actual use, great for providing a way to quickly copy/paste in the future
<script>
import propDoc from 'propdoc'
import myComponent from './myComponent.vue'
export default {
components: { propDoc },
// bind your component to use propdoc's native template output
data() {
return { documentMe: myComponent }
},
// or call getDoc() and use the same data in your own template
computed: {
myComponentDoc() { return propDoc.getDoc(myComponent) }
}
}
</script>
<template>
<section>
<prop-doc :component="documentMe"></prop-doc>
<div>
<h1>{{ myComponentDoc.name }}</h1>
<p>{{ myComponentDoc.introduction }}</p>
</div>
</section>
</template>
component
: required and should be the component object itselfdocumentation
: optional, can be any subset of component
, and will take precedence; useful for two functions
Two named slots are available for adding content to what propdoc emits
pre-use
will add content before the description and token fieldspre-props
will add content before the prop tables are emittedavailable in v0.8 onward
propDoc.getDoc(component, documentation)
props
object will be converted into an array instead of an object to simplify parsing in your template
v-for="prop in myDocumentedComponent.props"
and then prop.name
instead of having to separate out the key/value