Introducing: Storybook for Vue 🎉
First of many “Storybook for <insert framework here>”
Storybook has been known as “React Storybook” since the beginning, but it was rebranded to “Storybook” during the 3.0.0 release.
As described in our roadmap, this change was made to support more UI libraries than just React. And today, with the release of Storybook 3.2, we’re excited to introduce the first of many new “Storybook for <insert framework here>”!
And it’s “Storybook for Vue”!
The choice to start with Vue was an easy one. Vue is gaining crazy traction right now, and it sounded like it would fit rather well technically with Storybook, considering how componentized it is. 👍
And a good fit it was! Implementing Storybook for Vue was quite simple, thanks to webpack, react, vue and storybook itself being quite flexible, the proof of concept took about 2 days to get working.
Quite some time was spent testing, and getting addons to support Storybook for Vue without introducing breaking changes for React users.
What about Vue-Play?
We reached out to the maintainers of Vue Play (a storybook-inspired project). But it would appear that project has been abandoned. Maintaining Vue-Play would have been preferable over starting a ‘competitor’ for the OSS community as a whole, but one of our key goals is to make all Storybooks compatible with as many storybook addons as possible. This is quite a challenge in itself, but it meant we really couldn’t continue on the hard work the maintainers of vue-play had done.
Addons are supported?
Not all of them, unfortunately, but these are: addon-actions, addon-links, addon-knobs, addon-notes. We will be slowly rolling out support for more addons over time. Please let us know which ones you want us to prioritize. And of course if you want to help, that’s super welcome too!
To explain a little why we can’t simply support all storybook addons initially: many addons have a tight coupling with React. They are wrapping the story component with a React component. We don’t want to do that for a non-react project, because that’d introduce react into their codebase. We want the preview rendering to be done by their own accord. This should allow developer/debugger tools for the library to work. 🙇
We’re going to experiment to find better ways to enhance / tweak stories without the need to wrap stories with react components.
It will take some time to experiment, find the best methods, implement the right solution and migrate existing addons and docs.
3 People worked on the Storybook for Vue release,
making up a good team sharing the work 💪:
Norbert de Langen, bootstrapped the process and made the build work.
Alexandre Bodin, made rendering work, and worked on addon support.
Kazuya Kawaguchi, added Vue support to the Storybook CLI, and assisted with other work.
We’re super thankful for the help and encouragement we’ve gotten from the Vue community!
Storybook has transformed the react dev experience and is currently used by AirBnB, Slack, Squarespace, Lonely Planet, Coursera and more. We hope this will bring the same productivity and convenience to Vue!.
If you have any questions, concerns or issues with Storybook for Vue, Let us know by opening an issue on GitHub.
If you you want to support storybook, please hit the heart button below to help others find it. and if you want to keep up to date on Storybook progress, follow our channel. We have even more exciting announcements coming up!
And if you or your company using storybook wants to help financially that’s now an option via Open Collective! Supporting us financially will allow us to support our contributors!
♥️️ storybook team