@storybook/vue3-vite

What is @storybook/vue3-vite?

@storybook/vue3-vite is a Storybook integration for Vue 3 projects that use Vite as their build tool. It allows developers to create and manage UI components in isolation, providing a powerful environment for developing, testing, and documenting Vue 3 components.

What are @storybook/vue3-vite's main functionalities?

Component Development

This feature allows developers to create and manage Vue 3 components in isolation. The code sample demonstrates how to set up Storybook with Vue 3 and Vite, and how to create a simple Button component with a corresponding Storybook story.

```javascript
// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: '@storybook/vue3-vite',
};

// src/components/Button.vue
<template>
  <button :class="type" @click="onClick">{{ label }}</button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    label: String,
    type: String,
  },
  methods: {
    onClick() {
      this.$emit('click');
    },
  },
};
</script>

// src/components/Button.stories.js
import Button from './Button.vue';

export default {
  title: 'Example/Button',
  component: Button,
};

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

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

Interactive Documentation

This feature provides interactive documentation for Vue 3 components. The code sample shows how to configure Storybook to display inline stories and add descriptions to components, making it easier for developers to understand and use the components.

```javascript
// .storybook/preview.js
import { addParameters } from '@storybook/vue3-vite';

addParameters({
  docs: {
    inlineStories: true,
  },
});

// src/components/Button.stories.js
import Button from './Button.vue';

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    docs: {
      description: {
        component: 'A customizable button component for Vue 3.',
      },
    },
  },
};

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

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

Addon Integration

This feature allows integration with various Storybook addons to enhance the development experience. The code sample demonstrates how to add and configure addons like links, essentials, and accessibility (a11y) to a Storybook project.

```javascript
// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-a11y'],
  framework: '@storybook/vue3-vite',
};

// src/components/Button.stories.js
import Button from './Button.vue';

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    a11y: {
      // Accessibility parameters
    },
  },
};

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

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

Other packages similar to @storybook/vue3-vite

@storybook/vue3

@storybook/vue3 is a Storybook integration for Vue 3 projects, similar to @storybook/vue3-vite but without the Vite-specific optimizations. It uses Webpack as the default bundler, which may result in slower build times compared to Vite.

vite-plugin-vue2

vite-plugin-vue2 is a Vite plugin for Vue 2 projects. While it provides Vite's fast build capabilities, it is not directly comparable to @storybook/vue3-vite as it does not offer the same level of integration with Storybook for component development and documentation.

README

Storybook for React

Changelog

7.0.0-beta.0 (December 8, 2022)

We made it to beta, folks! 🎉

SB7 overhauls our build architecture, modernizes our output to ESM only, promotes Vite to a first-class peer to Webpack, rethinks our Docs addon, cleans up the UI, and contains hundreds of improvements at every level of the stack. We've been sharing some of these changes on the Storybook blog and will share more over the coming weeks.

Beta means that we don't have any more major changes on the radar for 7.0 and it's mostly stabilization from here on out. The core team is doing some basic testing now, and once we have a good QA plan, we'd love your help to make that happen. Please keep an eye out on the blog and on our Twitter or Mastadon (coming soon!) or Discord if you're interested in helping.

Bug Fixes

• Extend Angular Zone.js peer dependency range #20107
• Vite: Fix static source handling for addon-docs #20147
• Controls: Arrow keys don't work on number controls #19954