0
# Framework Configuration
1

2
Core configuration system for integrating Vue 3 with Vite in Storybook, providing type-safe configuration options and framework-specific settings.
3

4
## Capabilities
5

6
### Framework Options
7

8
Configuration interface for framework-specific options including builder settings and documentation generation.
9

10
```typescript { .api }
11
/**
12
 * Configuration options for the Vue 3 Vite framework
13
 */
14
interface FrameworkOptions {
15
  /** Vite builder configuration options */
16
  builder?: BuilderOptions;
17
  /** 
18
   * Plugin to use for generation docs for component props, events, slots and exposes.
19
   * 
20
   * "vue-component-meta" supports more complex types, better type docs, 
21
   * and js(x)/ts(x) components. Will become the default in the future.
22
   * 
23
   * Set to `false` to disable docgen processing for improved build performance.
24
   * 
25
   * @default 'vue-docgen-api'
26
   */
27
  docgen?: boolean | VueDocgenPlugin | {
28
    plugin: 'vue-component-meta';
29
    /**
30
     * Tsconfig filename to use. Should be set if your main tsconfig.json 
31
     * includes references to other tsconfig files like tsconfig.app.json.
32
     * 
33
     * @default 'tsconfig.json'
34
     */
35
    tsconfig: `tsconfig${string}.json`;
36
  };
37
}
38
```
39

40
### Storybook Configuration
41

42
Main configuration interface that extends base Storybook configuration with Vue 3 Vite specific options.
43

44
```typescript { .api }
45
/**
46
 * The interface for Storybook configuration in main.ts files
47
 */
48
type StorybookConfig = Omit<
49
  StorybookConfigBase,
50
  keyof StorybookConfigVite | keyof StorybookConfigFramework
51
> & StorybookConfigVite & StorybookConfigFramework;
52

53
interface StorybookConfigFramework {
54
  framework: FrameworkName | {
55
    name: FrameworkName;
56
    options: FrameworkOptions;
57
  };
58
  core?: StorybookConfigBase['core'] & {
59
    builder?: BuilderName | {
60
      name: BuilderName;
61
      options: BuilderOptions;
62
    };
63
  };
64
}
65
```
66

67
### Framework Type Names
68

69
Type definitions for framework and builder identification.
70

71
```typescript { .api }
72
type FrameworkName = CompatibleString<'@storybook/vue3-vite'>;
73
type BuilderName = CompatibleString<'@storybook/builder-vite'>;
74
```
75

76
### Documentation Plugin Types
77

78
Types for configuring component documentation generation.
79

80
```typescript { .api }
81
/** Available docgen plugins for Vue */
82
type VueDocgenPlugin = 'vue-docgen-api' | 'vue-component-meta';
83
```
84

85
## Usage Examples
86

87
### Basic Framework Configuration
88

89
```typescript
90
import type { StorybookConfig } from "@storybook/vue3-vite";
91

92
const config: StorybookConfig = {
93
  framework: {
94
    name: "@storybook/vue3-vite",
95
    options: {
96
      docgen: "vue-component-meta",
97
    },
98
  },
99
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
100
};
101

102
export default config;
103
```
104

105
### Advanced Configuration with Custom tsconfig
106

107
```typescript
108
import type { StorybookConfig } from "@storybook/vue3-vite";
109

110
const config: StorybookConfig = {
111
  framework: {
112
    name: "@storybook/vue3-vite",
113
    options: {
114
      docgen: {
115
        plugin: "vue-component-meta",
116
        tsconfig: "tsconfig.app.json",
117
      },
118
      builder: {
119
        // Vite builder options here
120
      },
121
    },
122
  },
123
  core: {
124
    builder: {
125
      name: "@storybook/builder-vite",
126
      options: {
127
        // Additional builder options
128
      },
129
    },
130
  },
131
};
132

133
export default config;
134
```
135

136
### Disabling Documentation Generation
137

138
```typescript
139
import type { StorybookConfig } from "@storybook/vue3-vite";
140

141
const config: StorybookConfig = {
142
  framework: {
143
    name: "@storybook/vue3-vite",
144
    options: {
145
      docgen: false, // Disable for improved build performance
146
    },
147
  },
148
};
149

150
export default config;
151
```