0
# Preset Integration
1

2
Storybook preset that automatically configures Vue 3 and Vite integration, providing seamless setup with zero configuration required for most use cases.
3

4
## Capabilities
5

6
### Core Configuration
7

8
Defines the core builder and renderer for the Vue 3 Vite framework.
9

10
```typescript { .api }
11
/**
12
 * Core preset configuration defining builder and renderer paths
13
 */
14
const core: PresetProperty<'core'> = {
15
  builder: string; // Path to @storybook/builder-vite
16
  renderer: string; // Path to @storybook/vue3
17
};
18
```
19

20
### Vite Final Configuration
21

22
Configures Vite with Vue 3 specific plugins and settings based on framework options.
23

24
```typescript { .api }
25
/**
26
 * Final Vite configuration function that adds Vue 3 plugins
27
 * @param config - Current Vite configuration
28
 * @param options - Storybook preset options
29
 * @returns Promise<ViteConfig> - Modified Vite configuration
30
 */
31
const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => ViteConfig;
32
```
33

34
### Documentation Generation Resolution
35

36
Internal function that resolves docgen framework options into a standardized configuration.
37

38
```typescript { .api }
39
/**
40
 * Resolves the docgen framework option into a standardized configuration
41
 * @param docgen - Framework docgen option
42
 * @returns Resolved docgen configuration or false if disabled
43
 */
44
function resolveDocgenOptions(
45
  docgen?: FrameworkOptions['docgen']
46
): false | { plugin: VueDocgenPlugin; tsconfig?: string };
47
```
48

49
**Resolution Logic:**
50
- `false` → Returns `false` (docgen disabled)
51
- `undefined` or `true` → Returns `{ plugin: 'vue-docgen-api' }` (default)
52
- String value → Returns `{ plugin: <string> }` (direct plugin specification)
53
- Object value → Returns the object as-is (full configuration)
54

55
## Preset Behavior
56

57
### Automatic Plugin Registration
58

59
The preset automatically registers the following Vite plugins based on configuration:
60

61
1. **Template Compilation Plugin**: Always included for Vue template processing
62
2. **Documentation Plugin**: Conditionally included based on `docgen` option:
63
   - `vue-component-meta` plugin for modern metadata extraction
64
   - `vue-docgen-api` plugin for legacy documentation generation
65
   - No plugin if `docgen` is set to `false`
66

67
### Framework Option Processing
68

69
The preset processes framework options as follows:
70

71
```typescript
72
// Framework option resolution
73
const framework = await options.presets.apply('framework');
74
const frameworkOptions: FrameworkOptions = 
75
  typeof framework === 'string' ? {} : (framework.options ?? {});
76

77
const docgen = resolveDocgenOptions(frameworkOptions.docgen);
78
```
79

80
### Plugin Configuration
81

82
Based on the resolved docgen configuration:
83

84
```typescript
85
if (docgen !== false) {
86
  if (docgen.plugin === 'vue-component-meta') {
87
    plugins.push(await vueComponentMeta(docgen.tsconfig));
88
  } else {
89
    plugins.push(await vueDocgen());
90
  }
91
}
92
```
93

94
## Usage Examples
95

96
### Using as Storybook Framework
97

98
The preset is automatically applied when using the framework in `.storybook/main.ts`:
99

100
```typescript
101
import type { StorybookConfig } from "@storybook/vue3-vite";
102

103
const config: StorybookConfig = {
104
  framework: "@storybook/vue3-vite", // Preset automatically applied
105
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
106
};
107

108
export default config;
109
```
110

111
### Manual Preset Import
112

113
For advanced use cases, the preset can be imported directly:
114

115
```javascript
116
// .storybook/main.js
117
module.exports = {
118
  framework: {
119
    name: "@storybook/vue3-vite",
120
    options: {
121
      docgen: "vue-component-meta",
122
    },
123
  },
124
  presets: [
125
    require.resolve("@storybook/vue3-vite/preset"), // Manual preset import
126
  ],
127
};
128
```
129

130
### Framework Option Variations
131

132
The preset handles different framework option formats:
133

134
```typescript
135
// String format (uses defaults)
136
framework: "@storybook/vue3-vite"
137

138
// Object format with options
139
framework: {
140
  name: "@storybook/vue3-vite",
141
  options: {
142
    docgen: "vue-component-meta"
143
  }
144
}
145

146
// Object format with custom tsconfig
147
framework: {
148
  name: "@storybook/vue3-vite",
149
  options: {
150
    docgen: {
151
      plugin: "vue-component-meta",
152
      tsconfig: "tsconfig.app.json"
153
    }
154
  }
155
}
156
```