@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 */
  });
});

Changelog

7.0.0-beta.54 (February 24, 2023)

Features

• Core: Add preview.js default export support #21227
• TypeScript: Add preview type and update CLI template #21205
• Autodocs: Hide Stories block when only primary story exists #21178
• CLI: Add automigration for GFM in MDX #21186

Bug Fixes

• Docs: Remove react-dom@18 warning in docs #21197
• mdx-to-csf codemod: Fix wrong export referenced in generated mdx #21226
• Preact: Enable ts plugin by default #21225
• pnpm: Fix run command for pnpm API #21165
• Angular: Properly destroy component when switching to another Story #21219
• CLI: Fix SvelteKit automigration package name #21210
• Angular: Initialize .storybook without references to root in sub projects #21202

Maintenance

• CLI: Only run useful automigrations on init #21203

Build

• Build: Disable broken cra-bench #21238
• Revert "Remove vue-cli as sandbox template is currently busted" #21237
• Build: Add mixed exports test case to composeConfigs #21230
• Build: pass debug option to sandbox generate task #21200
• Build: add @storybook/bench #21199
• Build: Fix Playwright to v1.30.0 #21194