@storybook/vue3

What is @storybook/vue3?

@storybook/vue3 is a tool for developing UI components in isolation for Vue 3 applications. It allows developers to build, test, and document components in a standalone environment, which helps in creating robust and reusable components.

What are @storybook/vue3's main functionalities?

Component Development

Allows developers to create and showcase different states of Vue 3 components in isolation.

import { storiesOf } from '@storybook/vue3';
import MyButton from './MyButton.vue';

storiesOf('MyButton', module)
  .add('default', () => ({
    components: { MyButton },
    template: '<my-button>Default</my-button>',
  }))
  .add('primary', () => ({
    components: { MyButton },
    template: '<my-button primary>Primary</my-button>',
  }));

Interactive Documentation

Enables the creation of interactive documentation for components, allowing users to see how components behave with different props and states.

import { Meta, Story } from '@storybook/vue3';
import MyButton from './MyButton.vue';

export default {
  title: 'Example/MyButton',
  component: MyButton,
} as Meta;

const Template: Story = (args) => ({
  components: { MyButton },
  setup() {
    return { args };
  },
  template: '<my-button v-bind="args" />',
});

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

Add-ons Support

Supports various add-ons to enhance the development experience, such as knobs for dynamic prop editing.

import { withKnobs, text, boolean } from '@storybook/addon-knobs';
import MyButton from './MyButton.vue';

export default {
  title: 'MyButton',
  decorators: [withKnobs],
};

export const withKnobsExample = () => ({
  components: { MyButton },
  props: {
    label: {
      type: String,
      default: text('Label', 'Button'),
    },
    primary: {
      type: Boolean,
      default: boolean('Primary', false),
    },
  },
  template: '<my-button :primary="primary">{{ label }}</my-button>',
});

Other packages similar to @storybook/vue3

vue-styleguidist

Vue Styleguidist is a component development environment with a focus on documentation. It allows developers to create and maintain a living style guide for Vue components. Compared to @storybook/vue3, Vue Styleguidist is more focused on documentation and less on interactive component development.

docz

Docz is a documentation tool that supports multiple frameworks, including Vue. It allows developers to create interactive documentation for their components. While it provides similar documentation capabilities as @storybook/vue3, it is more general-purpose and not specifically tailored for Vue 3.

vue-play

Vue Play is a minimalistic library for developing and testing Vue components in isolation. It offers a simpler and more lightweight alternative to @storybook/vue3, but lacks some of the advanced features and add-ons that Storybook provides.

README

Storybook Vue3 renderer

Changelog

8.4.0

Storybook 8.4 comes with a ton of exciting new features designed to give you the best experience developing, testing, and debugging tests in the browser!

• ▶️ Unified UI for component testing
• 5️⃣ Svelte 5 and Svelte CSF support
• ⚛️ React Native Storybook 8 release
• 🏷️ Tags-based filtering to organize your Storybook
• 🫧 Dependency cleanup to reduce install footprint
• 💯 Hundreds more improvements

<details> <summary>List of all updates</summary>

• Addon Test: Adjust file exports to be ESM/CJS compatible - #29471, thanks @valentinpalkovic!
• Addon Test: Error when addon interactions exists - #29434, thanks @valentinpalkovic!
• Addon Test: Escape XML when converting ANSI to HTML in test errors - #29446, thanks @ghengeveld!
• Addon Test: Fix hiding stacktrace for assertion errors in test panel - #29458, thanks @ghengeveld!
• Addon Test: Improve Error Handling - #29476, thanks @valentinpalkovic!
• Addon Test: Improve postinstall script - #29479, thanks @yannbf!
• Addon Test: Improve unsupported vitest message - #29486, thanks @valentinpalkovic!
• Addon Test: Only register testing module in Vite projects - #29472, thanks @yannbf!
• Addon Test: Throttle Vitest progress updates more heavily - #29482, thanks @ghengeveld!
• Addon-docs, blocks: Prebundle dependencies - #29301, thanks @JReinhold!
• Addon-Test: Support for @vitest/browser v2.1.2 - #29407, thanks @strozw!
• Blocks: Prebundle es-toolkit - #29259, thanks @JReinhold!
• Builder-vite: Replace .at() call with [] in codegen - #29048, thanks @Chudesnov!
• CLI: Don't add @storybook/addon-links by default - #29177, thanks @tobiasdiez!
• CLI: Ensure .gitignore updated via CLI ends with a newline - #29124, thanks @3w36zj6!
• CLI: Fix yarn detection - #29448, thanks @ndelangen!
• CLI: Migrate from chalk to picocolors - #28262, thanks @43081j!
• CLI: Refactor NPMProxy error parsing logic - #29459, thanks @yannbf!
• ConfigFile: Fix export { X } parsing - #29344, thanks @vctqs1!
• Core: Add unified UI Testing Module - #29241, thanks @yannbf!
• Core: Close story status menu when selecting an item - #29455, thanks @ghengeveld!
• Core: Fix building Storybook deleting project root files - #29371, thanks @JReinhold!
• Core: Fix race condition during empty folder init - #29490, thanks @valentinpalkovic!
• Core: Make prettier an optional peer dependency - #29223, thanks @JReinhold!
• Core: Migrate from express to polka - #29230, thanks @43081j!
• Core: Migrate from qs to picoquery - #28315, thanks @43081j!
• Core: Open 'Component tests' addon panel when clicking a story status - #29456, thanks @ghengeveld!
• Core: Remove handlebars usage - #29208, thanks @ndelangen!
• Core: Remove dependence on file-system-cache - #29256, thanks @ndelangen!
• Core: Replace fs-extra with the native APIs - #29126, thanks @ziebam!
• Core: Replace lodash with es-toolkit - #28981, thanks @ndelangen!
• Core: Show checkmark icon in story status dropdown and update status label for component tests - #29451, thanks @ghengeveld!
• Core: Show tooltip on filter toggles to clarify their purpose - #29447, thanks @ghengeveld!
• Core: Track test provider state in sessionStorage - #29450, thanks @ghengeveld!
• Core: Upgrade esbuild, broadening version range - #29254, thanks @ndelangen!
• Dependencies: Upgrade VTA to v3.1.0 - #29449, thanks @ghengeveld!
• Dependencies: Upgrade VTA to v3.2.0 to resolve peerDep conflict - #29461, thanks @ghengeveld!
• Interactions: Escape xml of interactions errors - #29414, thanks @kasperpeulen!
• Maintenance: Fix broken and outdated documentation links - #29412, thanks @jonniebigodes!
• Manager: Add tags property to ComponentEntry objects - #29343, thanks @Sidnioulz!
• React: Prebundle all of renderers/react's dependencies - #29298, thanks @ndelangen!
• Svelte: Improve argTypes inference with svelte2tsx - support runes - #29423, thanks @JReinhold!
• Test: Remove unused util dependency - #29310, thanks @JReinhold!
• UI: Brand image css class conflict causes image to resize on hot reloads - #29129, thanks @ShreySinha02!
• UI: Fix RefIndicator to use CheckIcon instead of string - #29209, thanks @JSMike!
• UI: Simple tag filtering - #29333, thanks @shilman!
• UI: Use production-mode react in manager - #29197, thanks @ndelangen!
• Viewport-addon: Add InitialViewportKeys type to viewport addon - #29182, thanks @hyeongrok7874!
• Vite: Add jsdoc-type-pratt-parser to optimizeDeps - #29179, thanks @tobiasdiez!
• Vite: Cleanup and prebundle dependencies - #29302, thanks @JReinhold!
• Webpack: Fix export 'act' (imported as 'React4') was not found in 'react' errors in webpack - #29235, thanks @kasperpeulen!

</details>