Build Better Components with 5 Vue Storybook Addons

Build Better Components with 5 Vue Storybook Addons

You'll see 5 addons for Vue Storybook to help you build quality components and improve your workflow. a11y addon, Percy addon, Controls addon, Jest addon, StoryShots addon

Each one of these addons will guarantee you’re thoroughly testing your components and give you a constant feedback loop.

Storybook is one of the best tools for building components separately from your app. It allows you to work on a component in isolation and mock out variations for each component. Storybook becomes an even more powerful and useful tool with the addition of their addons.

When starting any project, it’s important to consider accessibility, testing, and edge cases so you can deliver the best product possible. In this article, I’ll go over a few of my favorite addons for Vue Storybook to help you build quality components and improve your workflow.

  • a11y addon
  • Percy addon
  • Controls addon
  • Jest addon
  • StoryShots addon
  • Even more addons

a11y addon

Accessibility is a hot topic right now in web development and it’s critical to build accessibility into every project. The a11y addon should be one of the first things you install to your Storybook project. It’s built on the axe rules by Deque Systems.

Rather than analyzing accessibility issues page by page, you can see accessibility issues for each component with the a11y addon. This addon adds an accessibility tab that shows three other labels for violations, passes, and incomplete. Each rule will show more information on the issue and provide a link for how to fix the problem. Clicking on the “Highlight results” checkbox to the right of each violation will show you where this violation occurs in your component.

Using this addon in the early stages of development will help to make sure accessibility is not an afterthought in your development process. Since it can be time-consuming and costly to fix accessibility issues after the components are already built, it’s best to have a tool that will validate in real-time as you build. It’s also important to keep in mind that while automated testing is great at finding a majority of accessibility issues, it’s equally as important to manually accessibility test to make sure you’ve covered all possible issues.

a11y addon

Percy addon

One of the problems with continuously adding new code to your project is that it can introduce unwanted visual bugs. Visual regression testing is an important aspect of any project for making sure you catch visual bugs as new code is added in. One of the tools to help with this issue is Percy, a visual regression tool that lets you automate visual testing of your UI that also works with Storybook.

The setup for the Percy addon is a little more involved than the other addons mentioned in this article. You will need to create a free Percy account and then create a new organization and project. From there, you will be given a Percy token environment variable that is used for authentication. The free plan for Percy offers 5,000 screenshots a month and unlimited users. If 5,000 screenshots aren’t enough, you can upgrade to a professional or enterprise plan.

The Percy addon can be run as part of your CI to see changes for each component with every commit to your repository. After Percy has finished running, it will provide a URL where you can view uploaded snapshots for each component. Within the Percy dashboard, you can approve, request changes, or leave comments for each snapshot. The best part about Percy is that it generates snapshots for Chrome and Firefox on all of the various screen sizes. This means that it’s less likely a visual bug will go unnoticed for these browsers.

If you build out entire pages as part of your Storybook workflow, you can also use Percy to validate UI on those pages. Getting consistent feedback on each component and page will save you the time and money it takes to manually scour each page for unexpected UI changes in your app.

vue javascript web-development programming developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue.js Web App Development | Skenix Infotech

Our expert Vue.js developers follows Agile methodology that delivers high-quality & affordable Vue.js services. Hire Vue.js Developer from Skenix Infotech.

Useful Tools In Vue.js Web Development

Useful Tools In Vue.js Web Development. There are some tools that developers that are just getting started with Vue or sometimes, have experience building with Vue sometimes do not know exist to make development in Vue a lot easier.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Learn VUE 3 by Making a Web App ~ Composition API, Vue JS Hooks?

Learn how the new Vue JS 3 works by making a simple and easy web application to increment and decrement a numerical value using the Composition API, including Vue Ref, Vue Reactive and Vue Computed.