Comparing Vue Component Documentation tools

This article will compare 3 different tools for documenting and demoing Vue components.

• Vue-Doxen - The new hotness
• Vue Styleguidist - The old thing the community mostly ignored
• Storybook - The thing everyone has heard of, but no one really likes

Vue-Doxen

Vue-Doxen Website

• Built using: Glorius, Superior, Vue.js
• Aimed at: Anyone using Vue 3 for anything (component libraries, webapps, websites, whatever).
• Logo: It's a little doggy! Also feautres a stretched dropshadow reminiscent of the 1970's aesthetic revival of the early 2000's, with a Western-esque slab font. But I mean, look at that dog though!
• Future: Fully open source and community driven. Importantly, most features can be handled by the broader Vue community/ecosystem since "it's just a Vue component".
• Documentation: Great! Vue-Doxen practices "Documentation Driven Development". This means every new feature is documented first, which requires designing the API, and ensuring the API is as simple as possible to use, and therefor document. Once the feature is fully documented, it is implemented in the library. Any time a feature is changed, it is changed in the documentation first. This keeps the docs and code always in sync.
• Interactive Component Demos? Yes. By just passing in your Vue component a props playground will be auto-generated on the fly including different controls for different prop types. It even supports using your own custom components for these prop controls as one-offs, or globally replacing what Vue-Doxen ships with.
• Can turn off their CSS? Yes! All styles are optional and customizable.

Vue Styleguidist

Vue Styleguidist Website

• Built using: Gross, pathetic, React and JSX
• Aimed at: Vue 2 users via Vue-CLI (Webpack) plugin. (But also works with Vue 3 + Vite)
• Logo: They have the best logo in the entire Vue ecosystem. Respect.
• Future: Seems very limited. The maintainers have stated that many features and improvements they'd like to implement would require a total re-write to move away from React, but that would be an amount of effort too high to justify for such little usage the library gets. Let this be a lesson to everyone. Never use React for anything under any circumstance.
• Documentation: Very good. They have a ton of documentation and examples, everything is well written and easy to find.
• Interactive Component Demos? Kind of. They expect you to create many tiny demos of the component with different prop setups. However the code is right under the demo and it is editable, so you can type whatever you want into the prop. This works fine for simple components where the props are mostly just strings, but struggles on more complex scenarios.
• Can turn off their CSS? Nope, and it can interfere with your component's styles.

Storybook

Storybook Website

• Built using: Disgusting, low IQ, React and JSX
• Aimed at:

  "React developers building a component library, and if that's not you, it's kind of a black hole of suffering"
  - Michael Chan, AKA Chantastic, YouTuber known for making many Storybook tutorial videos.

• Logo: It's just an S on a pink rectangle that is supposed to look like a book. It's not bad. A little boring. Doesn't have an animal at all, not sure what they were thinking.
• Future: Bad profit incentives will continue to lead to constant development and releases for features no one cares about, while the core feature of documenting and demoing components remains pretty bad and never gets improved. More and more focus on making nothing work with it unless it is a custom built plugin to lock people into "their ecosystem".
• Documentation: Some of the worst I've ever seen. Trying to do just basic stuff is a constant pain. Everything you want to find on their docs takes a minimum of 75 minutes of research, and that's even if it's there at all, which it just may not be. Truly awful. Abysmal.
• Can turn off their CSS? Nope, and it will interfere with your component's styles.
• Interactive Component Demos? Yes. Their props can have controls to interact with the component in real time. The documentation around this is terrible, and they call a prop control "a knob", which is also slang for "a penis or a dumb-ass".
• Would they kick a dog? Yes. They are actually evil. When looking into how to set up Storybook for the first time, I found out, after 90 minutes of trying, there was no way to turn off their spyware without installing it first, and letting it spy on you at least once. AND THEN you can """"opt-out"""" through an obscure setting in a random file. This is just straight up fucking evil. Fuck these people. You don't end up in this situation on accident. Fuck them. Honestly don't know how they haven't been sued over this. They do not respect you. They do not respect your privacy. Their product is bad. Fuck them.

And thus concludes this entirely unbiased comparison.