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.