0
# Vite Plugin System
1

2
Standalone Vite plugins for Vue 3 component processing, template compilation, and documentation generation that can be used independently of Storybook.
3

4
## Capabilities
5

6
### Storybook Vue Plugin
7

8
Main plugin function that provides an array of Vue 3 specific Vite plugins for Storybook integration.
9

10
```typescript { .api }
11
/**
12
 * Creates an array of Vite plugins for Vue 3 Storybook integration
13
 * @returns Array of Promise<Plugin> containing Vue template compilation plugin
14
 */
15
function storybookVuePlugin(): Promise<Plugin>[];
16
```
17

18
### Template Compilation Plugin
19

20
Configures Vue template compilation with proper bundler settings for Storybook.
21

22
```typescript { .api }
23
/**
24
 * Creates a Vite plugin for Vue template compilation
25
 * @returns Promise<Plugin> - Vite plugin for template compilation
26
 */
27
async function templateCompilation(): Promise<Plugin>;
28
```
29

30
### Vue Component Meta Plugin
31

32
Advanced documentation plugin using vue-component-meta (Volar) for modern component metadata extraction.
33

34
```typescript { .api }
35
/**
36
 * Creates a Vite plugin for component metadata extraction using vue-component-meta
37
 * @param tsconfigPath - Path to TypeScript configuration file
38
 * @returns Promise<Plugin> - Vite plugin for component documentation
39
 */
40
async function vueComponentMeta(tsconfigPath?: string): Promise<Plugin>;
41
```
42

43
### Vue Docgen Plugin
44

45
Legacy documentation plugin using vue-docgen-api for component metadata extraction.
46

47
```typescript { .api }
48
/**
49
 * Creates a Vite plugin for component metadata extraction using vue-docgen-api
50
 * @returns Promise<Plugin> - Vite plugin for component documentation
51
 */
52
async function vueDocgen(): Promise<Plugin>;
53
```
54

55
### Internal Support Functions
56

57
Additional internal functions used by the plugin system.
58

59
```typescript { .api }
60
/**
61
 * Creates the vue-component-meta checker for metadata extraction
62
 * @param tsconfigPath - Path to TypeScript configuration file
63
 * @returns Checker instance for component analysis
64
 */
65
async function createVueComponentMetaChecker(tsconfigPath?: string): Promise<Checker>;
66

67
/**
68
 * Component metadata structure extracted by vue-component-meta
69
 */
70
interface MetaSource {
71
  exportName: string;
72
  displayName: string;
73
  sourceFiles: string;
74
  props: PropMeta[];
75
  events: EventMeta[];
76
  slots: SlotMeta[];
77
  exposed: ExposedMeta[];
78
}
79
```
80

81
## Plugin Details
82

83
### Template Compilation Configuration
84

85
The template compilation plugin configures Vue with the ESM bundler build:
86

87
```typescript
88
{
89
  name: 'storybook:vue-template-compilation',
90
  config: () => ({
91
    resolve: {
92
      alias: {
93
        vue: 'vue/dist/vue.esm-bundler.js',
94
      },
95
    },
96
  }),
97
}
98
```
99

100
### Vue Component Meta Features
101

102
The vue-component-meta plugin provides:
103

104
- **TypeScript Support**: Full TypeScript integration with type extraction
105
- **Component Analysis**: Extracts props, events, slots, and exposed properties
106
- **Hot Module Reload**: Updates component metadata on file changes
107
- **Schema Optimization**: Removes nested schemas to prevent memory issues
108
- **Filter Configuration**: Excludes stories and virtual modules
109

110
### Vue Docgen Features
111

112
The vue-docgen-api plugin provides:
113

114
- **Vue File Processing**: Processes `.vue` single-file components
115
- **Legacy Support**: Compatible with older Vue projects
116
- **Basic Metadata**: Extracts basic component information
117
- **Simple Integration**: Minimal configuration required
118

119
## Usage Examples
120

121
### Standalone Vite Configuration
122

123
Use the plugins directly in your `vite.config.ts`:
124

125
```typescript
126
import { defineConfig } from "vite";
127
import { storybookVuePlugin } from "@storybook/vue3-vite/vite-plugin";
128

129
export default defineConfig({
130
  plugins: [
131
    ...storybookVuePlugin(),
132
    // other plugins...
133
  ],
134
});
135
```
136

137
### Plugin Configuration with Options
138

139
The plugins are automatically configured based on framework options. For custom behavior, configure through the framework options:
140

141
```typescript
142
// In .storybook/main.ts
143
import type { StorybookConfig } from "@storybook/vue3-vite";
144

145
const config: StorybookConfig = {
146
  framework: {
147
    name: "@storybook/vue3-vite",
148
    options: {
149
      docgen: {
150
        plugin: "vue-component-meta",
151
        tsconfig: "tsconfig.app.json"
152
      }
153
    }
154
  }
155
};
156
```
157

158
### Plugin Filtering
159

160
The vue-component-meta plugin filters files based on patterns:
161

162
```typescript
163
// Included files
164
const include = /\.(vue|ts|js|tsx|jsx)$/;
165

166
// Excluded files
167
const exclude = /\.stories\.(ts|tsx|js|jsx)$|^\0\/virtual:|^\/virtual:|\.storybook\/.*\.(ts|js)$/;
168
```
169

170
### Component Meta Schema
171

172
The plugin extracts comprehensive component metadata:
173

174
```typescript
175
interface MetaSource {
176
  exportName: string;
177
  displayName: string;
178
  sourceFiles: string;
179
  props: PropMeta[];
180
  events: EventMeta[];
181
  slots: SlotMeta[];
182
  exposed: ExposedMeta[];
183
}
184
```
185

186
### Hot Module Reload Handling
187

188
The vue-component-meta plugin includes comprehensive HMR support for live component metadata updates:
189

190
```typescript
191
async handleHotUpdate({ file, read, server, modules, timestamp }) {
192
  const content = await read();
193
  checker.updateFile(file, content);
194
  
195
  // Invalidate modules and trigger reload
196
  const invalidatedModules = new Set<ModuleNode>();
197
  for (const mod of modules) {
198
    server.moduleGraph.invalidateModule(mod, invalidatedModules, timestamp, true);
199
  }
200
  
201
  server.ws.send({ type: 'full-reload' });
202
  return [];
203
}
204
```
205

206
**HMR Features:**
207
- **Live Updates**: Component metadata updates immediately when source files change
208
- **Module Invalidation**: Properly invalidates affected modules in the dependency graph
209
- **Full Reload**: Triggers browser reload to ensure metadata consistency
210
- **File Tracking**: Updates internal checker state with modified file content