0
# @storybook/vue3-vite
1

2
@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.
3

4
## Package Information
5

6
- **Package Name**: @storybook/vue3-vite
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @storybook/vue3-vite`
10
- **Minimum Node Version**: 20.0.0
11
- **Vite Compatibility**: ^5.0.0 || ^6.0.0 || ^7.0.0
12

13
## Core Imports
14

15
```typescript
16
import type { StorybookConfig, FrameworkOptions } from "@storybook/vue3-vite";
17
```
18

19
For preset configuration:
20
```javascript
21
const preset = require("@storybook/vue3-vite/preset");
22
```
23

24
For standalone Vite plugin:
25
```typescript
26
import { storybookVuePlugin } from "@storybook/vue3-vite/vite-plugin";
27
```
28

29
For Node utilities:
30
```typescript
31
import { defineMain } from "@storybook/vue3-vite/node";
32
```
33

34
## Basic Usage
35

36
### Framework Configuration
37

38
Configure in `.storybook/main.ts`:
39

40
```typescript
41
import type { StorybookConfig } from "@storybook/vue3-vite";
42

43
const config: StorybookConfig = {
44
  framework: {
45
    name: "@storybook/vue3-vite",
46
    options: {
47
      docgen: "vue-component-meta", // or 'vue-docgen-api'
48
    },
49
  },
50
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
51
  addons: ["@storybook/addon-essentials"],
52
};
53

54
export default config;
55
```
56

57
### Standalone Vite Plugin
58

59
Use in `vite.config.ts`:
60

61
```typescript
62
import { defineConfig } from "vite";
63
import { storybookVuePlugin } from "@storybook/vue3-vite/vite-plugin";
64

65
export default defineConfig({
66
  plugins: [
67
    ...storybookVuePlugin(),
68
    // other plugins
69
  ],
70
});
71
```
72

73
## Architecture
74

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

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

83
## Capabilities
84

85
### Framework Configuration
86

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

89
```typescript { .api }
90
interface FrameworkOptions {
91
  builder?: BuilderOptions;
92
  docgen?: boolean | VueDocgenPlugin | {
93
    plugin: 'vue-component-meta';
94
    tsconfig: `tsconfig${string}.json`;
95
  };
96
}
97

98
type StorybookConfig = Omit<StorybookConfigBase, keyof StorybookConfigVite | keyof StorybookConfigFramework> 
99
  & StorybookConfigVite 
100
  & StorybookConfigFramework;
101
```
102

103
[Framework Configuration](./framework-config.md)
104

105
### Preset Integration
106

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

109
```typescript { .api }
110
const core: PresetProperty<'core'>;
111
const viteFinal: StorybookConfig['viteFinal'];
112
```
113

114
[Preset Integration](./preset-integration.md)
115

116
### Vite Plugin System
117

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

120
```typescript { .api }
121
function storybookVuePlugin(): Promise<Plugin>[];
122
```
123

124
[Vite Plugin System](./vite-plugins.md)
125

126
### Component Documentation
127

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

130
```typescript { .api }
131
type VueDocgenPlugin = 'vue-docgen-api' | 'vue-component-meta';
132

133
type VueDocgenInfo<T extends VueDocgenPlugin> = T extends 'vue-component-meta'
134
  ? ComponentMeta
135
  : ComponentDoc;
136
```
137

138
[Component Documentation](./component-docs.md)
139

140
### Node Utilities
141

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

144
```typescript { .api }
145
function defineMain(config: StorybookConfig): StorybookConfig;
146
```
147

148
## Types
149

150
### Framework Types
151

152
```typescript { .api }
153
type FrameworkName = CompatibleString<'@storybook/vue3-vite'>;
154
type BuilderName = CompatibleString<'@storybook/builder-vite'>;
155

156
interface StorybookConfigFramework {
157
  framework: FrameworkName | {
158
    name: FrameworkName;
159
    options: FrameworkOptions;
160
  };
161
  core?: StorybookConfigBase['core'] & {
162
    builder?: BuilderName | {
163
      name: BuilderName;
164
      options: BuilderOptions;
165
    };
166
  };
167
}
168
```
169

170
### Documentation Types
171

172
```typescript { .api }
173
type VueDocgenInfoEntry<
174
  T extends VueDocgenPlugin,
175
  TKey extends 'props' | 'events' | 'slots' | 'exposed' | 'expose' = 
176
    | 'props' | 'events' | 'slots' | 'exposed' | 'expose'
177
> = ArrayElement<
178
  T extends 'vue-component-meta'
179
    ? VueDocgenInfo<'vue-component-meta'>[Exclude<TKey, 'expose'>]
180
    : VueDocgenInfo<'vue-docgen-api'>[Exclude<TKey, 'exposed'>]
181
>;
182

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

186
## Re-exported from @storybook/vue3
187

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

190
- **Types**: `Args`, `ArgTypes`, `Meta`, `StoryFn`, `StoryObj`, `Decorator`, `Loader`, `StoryContext`, `Preview`
191
- **Functions**: `setup`, `setProjectAnnotations`, `composeStory`, `composeStories`
192
- **Renderer**: `VueRenderer` type and related functionality
193

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