0
# Documentation Integration
1

2
Automatic documentation generation including component prop extraction, source code generation, and argument type inference for Vue components in Storybook.
3

4
## Capabilities
5

6
### Extract Arg Types
7

8
Extracts argument types from Vue components using docgen information and component analysis.
9

10
```typescript { .api }
11
/**
12
 * Extract argument types from Vue components
13
 * @param component - Vue component to analyze
14
 * @returns Argument type definitions or null if no docgen info available
15
 */
16
function extractArgTypes(component: VueRenderer['component']): StrictArgTypes | null;
17

18
interface StrictArgTypes {
19
  [key: string]: {
20
    name: string;
21
    description?: string;
22
    type: {
23
      required: boolean;
24
      name: string;
25
      value?: any;
26
      summary?: string;
27
    };
28
    table?: {
29
      type: any;
30
      jsDocTags?: any;
31
      defaultValue?: any;
32
      category: string;
33
    };
34
  };
35
}
36
```
37

38
**Usage Example:**
39

40
```typescript
41
import { extractArgTypes } from "@storybook/vue";
42
import MyButton from "./MyButton.vue";
43

44
// Automatically extract arg types from component
45
const argTypes = extractArgTypes(MyButton);
46
console.log(argTypes);
47

48
// Manual usage in meta
49
const meta: Meta<typeof MyButton> = {
50
  title: "Example/Button",
51
  component: MyButton,
52
  argTypes: extractArgTypes(MyButton),
53
};
54
```
55

56
### Source Decorator
57

58
Generates source code snippets for stories in the Docs addon, showing the actual Vue template syntax.
59

60
```typescript { .api }
61
/**
62
 * Generate source code snippets for stories
63
 * @param storyFn - Story function to analyze
64
 * @param context - Story context for source generation
65
 * @returns Vue component with source generation capabilities
66
 */
67
function sourceDecorator(storyFn: any, context: StoryContext): ComponentOptions<Vue>;
68
```
69

70
**Usage Example:**
71

72
```typescript
73
// Applied automatically in docs preview
74
export const decorators: DecoratorFunction<VueRenderer>[] = [sourceDecorator];
75

76
// Results in generated source like:
77
// <MyButton primary="true" label="Button" />
78
```
79

80
### Skip Source Render
81

82
Determines whether source code should be rendered based on story parameters and configuration.
83

84
```typescript { .api }
85
/**
86
 * Determine if source should be rendered
87
 * @param context - Story context to check
88
 * @returns Boolean indicating if source rendering should be skipped
89
 */
90
function skipSourceRender(context: StoryContext): boolean;
91
```
92

93
### VNode to String Conversion
94

95
Converts Vue VNode structures to string representations for source code display.
96

97
```typescript { .api }
98
/**
99
 * Convert Vue VNode to string representation
100
 * @param vnode - Vue VNode to convert
101
 * @returns String representation of the VNode structure
102
 */
103
function vnodeToString(vnode: Vue.VNode): string;
104

105
/**
106
 * Argument type enhancers for improving type definitions
107
 */
108
const argTypesEnhancers: ArgTypesEnhancer<VueRenderer>[];
109

110
/**
111
 * Documentation-specific parameters for stories
112
 */
113
const parameters: {
114
  docs: {
115
    story: { inline: boolean; iframeHeight: string };
116
    extractArgTypes: typeof extractArgTypes;
117
    extractComponentDescription: Function;
118
  };
119
};
120
```
121

122
## Documentation Configuration
123

124
### Preview Parameters
125

126
Configure documentation behavior in your preview:
127

128
```typescript
129
// .storybook/preview.js
130
import type { Preview } from "@storybook/vue";
131

132
const preview: Preview = {
133
  parameters: {
134
    docs: {
135
      story: { inline: true, iframeHeight: '120px' },
136
      extractArgTypes,
137
      extractComponentDescription,
138
    },
139
  },
140
};
141

142
export default preview;
143
```
144

145
### Component Documentation Sections
146

147
The documentation system recognizes these Vue component sections:
148

149
```typescript { .api }
150
const SECTIONS = ['props', 'events', 'slots', 'methods'];
151
```
152

153
**Props Section:**
154
- Extracts component prop definitions
155
- Includes types, defaults, and validation rules
156
- Supports enum inference from JSDoc `@values` tags
157

158
**Events Section:**
159
- Documents component events and their payloads
160
- Includes event binding examples
161
- Supports custom event documentation
162

163
**Slots Section:**
164
- Documents available component slots
165
- Includes slot prop documentation
166
- Shows slot usage examples
167

168
**Methods Section:**
169
- Documents exposed component methods
170
- Includes method signatures and descriptions
171
- Shows method usage examples
172

173
## Advanced Documentation Features
174

175
### Enum Type Inference
176

177
Automatically infers enum types from JSDoc comments:
178

179
```vue
180
<script>
181
export default {
182
  props: {
183
    /**
184
     * Button size
185
     * @values small, medium, large
186
     */
187
    size: {
188
      type: String,
189
      default: 'medium'
190
    }
191
  }
192
}
193
</script>
194
```
195

196
Results in:
197
```typescript
198
{
199
  size: {
200
    control: { type: 'select' },
201
    options: ['small', 'medium', 'large']
202
  }
203
}
204
```
205

206
### Source Code Parameters
207

208
Control source code generation with parameters:
209

210
```typescript
211
export const MyStory: StoryObj = {
212
  parameters: {
213
    docs: {
214
      source: {
215
        type: 'dynamic', // 'auto' | 'dynamic' | 'code'
216
        code: '<MyButton custom="code" />', // Custom source code
217
      },
218
    },
219
  },
220
};
221
```
222

223
### Component Description Extraction
224

225
Automatically extract component descriptions from:
226
- JSDoc comments in component files
227
- README files in component directories
228
- Inline component documentation
229

230
```vue
231
<script>
232
/**
233
 * A versatile button component that supports multiple variants,
234
 * sizes, and interaction states for consistent UI design.
235
 */
236
export default {
237
  name: 'MyButton',
238
  // ...
239
}
240
</script>
241
```
242

243
### Args Story Detection
244

245
The system automatically detects args-based stories for optimal documentation:
246

247
```typescript
248
// Automatically detected as args story
249
export const Primary: StoryObj = {
250
  args: {
251
    primary: true,
252
    label: 'Button',
253
  },
254
};
255
```
256

257
### Error Handling
258

259
Graceful error handling for documentation generation:
260

261
- Failed docgen extraction falls back to basic type analysis
262
- Missing component descriptions are handled gracefully
263
- VNode conversion errors are logged but don't break rendering
264
- Invalid source code generation shows fallback content
265

266
**Debug Information:**
267
```typescript
268
// Enable debug logging for documentation issues
269
console.warn(`Failed to find story component: ${storyComponent}`);
270
console.warn(`Failed to generate dynamic source: ${error}`);
271
```