@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.13 (December 20, 2022)

Features

• Angular: Support compodoc output arg #20338
• NextJS: Support @next/font #20291
• NextJS: Support useSelectedLayoutSegment and useSelectedLayoutSegments #20330
• Preview Api: export userOrAutoTitle function #20325

Bug Fixes

• Fix: peer dependency warning for vite-react #20328
• UI: swap react-sizeme for react-resize-detector #20333
• Vite: Detect React SWC plugin #20335
• CLI: Fix automigrate filtering #20329
• Vite: Include user config optimizeDeps in final optimizeDeps #20313

Maintenance

• Tech: improve global types #20184
• CLI: Fix sb migrate csf-2-to-3 for multiple file extensions #20290
• CLI: Replace update-notifier with simple-update-notifier #20266

Build

• Build: remove borders in task error message #20305
• Build: Fix pretty-docs CI job #20319
• Build: Update Playwright to 1.29 #20318

Dependencies

• NextJS: Make addon-actions a regular dependency #20324
• NextJS: Fix addon-actions peerdependency #20324
• Vite-react: Fix peer dependency warning #20328