@storybook/vue3-vite

@storybook/vue3-vite is a comprehensive Storybook framework specifically designed for Vue 3 applications built with Vite. It enables developers to develop, document, and test UI components in isolation with zero configuration setup. The framework provides advanced component documentation generation, seamless Vue 3 ecosystem integration, and flexible configuration options for different project needs.

Package Information

• Package Name: @storybook/vue3-vite
• Package Type: npm
• Language: TypeScript
• Installation: npm install @storybook/vue3-vite
• Minimum Node Version: 20.0.0
• Vite Compatibility: ^5.0.0 || ^6.0.0 || ^7.0.0

Core Imports

import type { StorybookConfig, FrameworkOptions } from "@storybook/vue3-vite";

For preset configuration:

const preset = require("@storybook/vue3-vite/preset");

For standalone Vite plugin:

import { storybookVuePlugin } from "@storybook/vue3-vite/vite-plugin";

For Node utilities:

import { defineMain } from "@storybook/vue3-vite/node";

Basic Usage

Framework Configuration

Configure in .storybook/main.ts:

import type { StorybookConfig } from "@storybook/vue3-vite";

const config: StorybookConfig = {
  framework: {
    name: "@storybook/vue3-vite",
    options: {
      docgen: "vue-component-meta", // or 'vue-docgen-api'
    },
  },
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
  addons: ["@storybook/addon-essentials"],
};

export default config;

Standalone Vite Plugin

Use in vite.config.ts:

import { defineConfig } from "vite";
import { storybookVuePlugin } from "@storybook/vue3-vite/vite-plugin";

export default defineConfig({
  plugins: [
    ...storybookVuePlugin(),
    // other plugins
  ],
});

Architecture

@storybook/vue3-vite is built around several key components:

• Framework Integration: Seamless integration with Storybook's framework system
• Documentation Generation: Advanced component metadata extraction using vue-component-meta or vue-docgen-api
• Vite Plugin System: Custom Vite plugins for Vue 3 template compilation and component processing
• Type System: Full TypeScript support with comprehensive type definitions
• Configuration Management: Flexible options for different project setups and requirements

Capabilities

Framework Configuration

Core configuration system for integrating Vue 3 with Vite in Storybook, including framework options and type definitions.

interface FrameworkOptions {
  builder?: BuilderOptions;
  docgen?: boolean | VueDocgenPlugin | {
    plugin: 'vue-component-meta';
    tsconfig: `tsconfig${string}.json`;
  };
}

type StorybookConfig = Omit<StorybookConfigBase, keyof StorybookConfigVite | keyof StorybookConfigFramework> 
  & StorybookConfigVite 
  & StorybookConfigFramework;

Framework Configuration

Preset Integration

Storybook preset that automatically configures Vue 3 and Vite integration, including builder setup and plugin configuration.

const core: PresetProperty<'core'>;
const viteFinal: StorybookConfig['viteFinal'];

Preset Integration

Vite Plugin System

Standalone Vite plugins for Vue 3 component processing, template compilation, and documentation generation.

function storybookVuePlugin(): Promise<Plugin>[];

Vite Plugin System

Component Documentation

Advanced component metadata extraction supporting both modern (vue-component-meta) and legacy (vue-docgen-api) documentation generation systems.

type VueDocgenPlugin = 'vue-docgen-api' | 'vue-component-meta';

type VueDocgenInfo<T extends VueDocgenPlugin> = T extends 'vue-component-meta'
  ? ComponentMeta
  : ComponentDoc;

Component Documentation

Node Utilities

Configuration helper functions for Node.js environments to simplify Storybook configuration setup.

function defineMain(config: StorybookConfig): StorybookConfig;

Types

Framework Types

type FrameworkName = CompatibleString<'@storybook/vue3-vite'>;
type BuilderName = CompatibleString<'@storybook/builder-vite'>;

interface StorybookConfigFramework {
  framework: FrameworkName | {
    name: FrameworkName;
    options: FrameworkOptions;
  };
  core?: StorybookConfigBase['core'] & {
    builder?: BuilderName | {
      name: BuilderName;
      options: BuilderOptions;
    };
  };
}

Documentation Types

type VueDocgenInfoEntry<
  T extends VueDocgenPlugin,
  TKey extends 'props' | 'events' | 'slots' | 'exposed' | 'expose' = 
    | 'props' | 'events' | 'slots' | 'exposed' | 'expose'
> = ArrayElement<
  T extends 'vue-component-meta'
    ? VueDocgenInfo<'vue-component-meta'>[Exclude<TKey, 'expose'>]
    : VueDocgenInfo<'vue-docgen-api'>[Exclude<TKey, 'exposed'>]
>;

type ArrayElement<T> = T extends readonly (infer A)[] ? A : never;

Re-exported from @storybook/vue3

This package re-exports all functionality from @storybook/vue3, including:

• Types: Args, ArgTypes, Meta, StoryFn, StoryObj, Decorator, Loader, StoryContext, Preview
• Functions: setup, setProjectAnnotations, composeStory, composeStories
• Renderer: VueRenderer type and related functionality

See the @storybook/vue3 documentation for detailed information about these re-exported capabilities.