@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 Vue and Vite

See documentation for installation instructions, usage examples, APIs, and more.

Changelog

8.4.1

• Core: Relax peer dep constraint of shim packages - #29503, thanks @kasperpeulen!