Vue3 Org

Posted on  by admin
Authors
  • Name
    Evan You
    Twitter
    @youyuxi

Vue 3 is the latest major installment of Vue.js that features better ergonomics, better performance, and new APIs for managing large apps. Storybook is an open source tool for building UI components.

200+ addons to choose from

It speeds up UI development, generates documentation, and automates testing. This versatility makes it the tool of choice at Netflix, Twitter, GitHub, Slack, and Microsoft.

  • Thousands of Vue 2 projects already use Storybook to build UIs faster. We're excited to ship official Vue 3 support for the next-gen framework.

  • All of Storybook’s core features are included. 🎁 Zero-config setup w/ built-in TypeScript support🎛 Auto-generated controls and documentation📸 Automated snapshot and visual testing🧩 Hundreds of addons: A11y, Perf, GraphQL, Theming, etc.

Vue holds a special place in the Storybook ecosystem.

It was one of the earliest communities we integrated with back in 2017.

Since then, usage of @storybook/vue has skyrocketed to over 500,000 npm downloads a month. The Vue ecosystem has adopted us too. Storybook now has first-class integrations with NuxtJS and Vuetify.

Auto-generated controls and documentation

Today, Vue is one of Storybook’s “core” frameworks. That means every new feature and core addon ships with first-class support and documentation for Vue out of the gate.

We’re excited to continue our commitment with Vue 3 support. To get started, run the following in the root of an existing Vue 3 project:. This detects the project type, installs @storybook/vue3, and adds some sample files to demonstrate the basics of Storybook.

Next steps

Running `yarn storybook` gives you the following zero-config setup:. When you navigate to Storybook locally, you’ll see examples of how to write Vue 3 stories, links to common configurations, as well as the “essential” addons that ship with Storybook.

TypeScript (TS) support is built-in. Learn more in the official documentation.

  • First class support means that Storybook’s key features work seamlessly with Vue 3.

Two of the most-requested features include auto-generated controls and documentation. When you annotate your Vue components with JSDoc comments, Storybook converts that into living documentation alongside your stories. Consider the Vue 3 example:. This example is written in Component Story Format, a standard way to document components that was developed by Storybook and supported by the broader frontend ecosystem.

The Template defines a Vue 3 component using setup hooks to show how to map dynamic inputs (“args”) to component props. Each named export configures the template to show a key state of the component.

Zero-config setup

Finally, a default export defines metadata about the component. Together, these result in auto-generated controls for interactively exploring component states:. It also results in component documentation with no extra work, which includes all of the key states laid out with props extracted from the component source:.

Your component's controls and docs are always up to date because they're generated automatically from the source code. You don't need to keep track of your UI documentation whenever a component's API changes, Storybook does that for you.

Get involved

When you build UIs in Storybook you get testing for free. Storybook revolves around the concept of stories, these capture the supported state of your UI components. In development, you can manually confirm your stories “look right” and use a suite of addons to test your story in other dimensions like accessibility and mobile-friendliness.

In continuous integration, you can automatically detect both structural and visual changes in your stories using snapshot and visual testing respectively.

Testing your stories is so useful that multiple commercial services integrate with Storybook to run tests in the cloud and across browsers.