I’m one of three front-end engineers on our team of about a dozen back-end engineers, which means the front-end team needs to support far more than ourselves when rolling out components the entire team will use.

Meaning? Drumroll, keeping some form of documentation on all our components has become a necessity (for our sanity)… otherwise we are the documentation. And if you’ve ever spent your time fielding questions on Slack about which props go in which component, it’s not super scalable.

Documentation you say?

“Easy!” you think, “there are a bunch of documenters out there already!”

Like:

https://storybook.js.org/docs/guides/guide-vue/ (static site generator)

https://vuepress.vuejs.org/guide/ (static site generator)

https://vue-styleguidist.github.io (static site generator)

https://www.npmjs.com/package/vue-documentor (needs Vue Router)

https://github.com/viljamis/vue-design-system/wiki (built on top of a few other packages, but more comprehensive)

And these are great! But Skilljar doesn’t yet live entirely within Vue-land (Vueville? The E-Vue?) — we live within a large, pre-existing jQuery and Django (a Python framework) project that we’re slowly introducing Vue into.

Slowly.

And since we’re not yet using Vue Router or Vuex, and adding a static site generator tool just isn’t going to get traction when everybody has actual work-things to get done, we arrive at my favorite type of solution — a simple, drop-in component. That outputs… components. Uhh…

I’ll just show you.

Yer a wizard, ’arry

(Because it’s just like magic. It’s cool, I swear)

Given something as simple as this:

// YourVueDocumentationPage.vue <template>

<div>

<vue-documenter>

<sj-datatable></sj-datatable>

<sj-calendar></sj-calendar>

</vue-documenter>

</div>

</template>

<script>

import VueDocumenter from 'vue-documenter'; import SjDatatable from './components/Datatable.vue';

import SjCalendar from './components/Calendar.vue'; export default {

components: {

VueDocumenter,

SjDatatable,

SjCalendar,

},

data () {

return {}

}

}

</script>

Vue Documenter will output something like this example of our Datatable.vue component: