How to use Storybook within your VueJS Project

If you develop projects with a component based approach, you will reach very fast a huge number of components and complex projects structure. In that case it could be a good start to think about the use of a way for isolated component rendering like Storybook offers.

Let’s have a quick view on Storybook to understand the concept and tool. Storybook is tool for developing UI components in isolation for React, Vue and Angular. With the use of Stoybook you will gain benefits which can support your development experience within the team.

Storybook: UI component explorer for frontend developers

* mock hard to reach use cases
* document use cases as stories
* powerful addons

[image:D7FD47CB-8CB9-4551-861F-2FAE4840CBF9-41999-000096BDF8A55C53/Screenshot 2019-10-08 at 19.03.49.png]

Beispiele von Storybook

Github: Storybook
Netlify: Storybook

Five reasons to use storybook tests

5 Reasons to Use Storybook Tests for Your React Web App

Component based development but actually no way to render components in isolated environments

* test rendering different cases
/special cases like no data, longer content/
* interaction testing
/action logger/
* built-in style guide which updates with your code
* snapshot testing with jest

Other Tools