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

Storybook for Vue 3 is a UI development environment for your Vue 3 components. With it, you can visualize different states of your UI components and develop them interactively.

Storybook runs outside of your app. So you can develop UI components in isolation without worrying about app specific dependencies and requirements.

Getting Started

cd my-vue3-app
npx storybook init

For more information visit: storybook.js.org

---

Storybook also comes with a lot of addons and a great API to customize as you wish. You can also build a static version of your Storybook and deploy it anywhere you want.

Extending the Vue application

Storybook creates a Vue 3 application for your component preview. When using global custom components (app.component), directives (app.directive), extensions (app.use), or other application methods, you will need to configure those in the ./storybook/preview.js file.

Therefore, Storybook provides you with a setup function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration.

// .storybook/preview.js

import { setup } from '@storybook/vue3';

setup((app) => {
  app.use(MyPlugin);
  app.component('my-component', MyComponent);
  app.mixin({
    /* My mixin */
  });
});