0
# Storybook Vue Renderer
1

2
Storybook Vue renderer enables Vue 2.x component story development and documentation within the Storybook ecosystem. It provides a complete rendering engine that understands Vue's component system, reactivity model, and template syntax, allowing developers to create interactive component stories with full access to Vue features including props, events, slots, and computed properties.
3

4
## Package Information
5

6
- **Package Name**: @storybook/vue
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Vue Version**: Vue 2.x only (for Vue 3, use @storybook/vue3)
10
- **Installation**: `npm install @storybook/vue`
11
- **Peer Dependencies**: Vue 2.6.8+, Babel Core, CSS Loader
12

13
## Core Imports
14

15
```typescript
16
import type { Meta, StoryFn, StoryObj, Decorator, Loader } from "@storybook/vue";
17
```
18

19
For story configuration:
20
```typescript
21
import { storiesOf, configure, forceReRender, raw } from "@storybook/vue";
22
```
23

24
For custom rendering:
25
```typescript
26
import { render, renderToCanvas } from "@storybook/vue";
27
```
28

29
## Basic Usage
30

31
```typescript
32
import type { Meta, StoryObj } from "@storybook/vue";
33
import MyButton from "./MyButton.vue";
34

35
// Component metadata
36
const meta: Meta<typeof MyButton> = {
37
  title: "Example/Button",
38
  component: MyButton,
39
  parameters: {
40
    layout: "centered",
41
  },
42
  argTypes: {
43
    backgroundColor: { control: "color" },
44
  },
45
};
46

47
export default meta;
48
type Story = StoryObj<typeof meta>;
49

50
// Story definitions
51
export const Primary: Story = {
52
  args: {
53
    primary: true,
54
    label: "Button",
55
  },
56
};
57

58
export const Secondary: Story = {
59
  args: {
60
    label: "Button",
61
  },
62
};
63
```
64

65
## Architecture
66

67
The Storybook Vue renderer is built around several key components:
68

69
- **Type System**: Complete TypeScript definitions for Vue-specific story formats (Meta, StoryFn, StoryObj)
70
- **Rendering Engine**: Vue 2.x compatible renderer that handles component mounting and lifecycle
71
- **Story APIs**: Both legacy (storiesOf) and modern (CSF) story definition patterns
72
- **Documentation Integration**: Automatic component documentation extraction and source code generation
73
- **Decorator System**: Story decoration with Vue component wrapping and context injection
74

75
## Capabilities
76

77
### Story Type Definitions
78

79
Complete TypeScript support for defining Vue component stories with full type safety and IntelliSense support.
80

81
```typescript { .api }
82
type Meta<TCmpOrArgs = Args> = ComponentAnnotations<VueRenderer, ComponentPropsOrProps<TCmpOrArgs>>;
83
type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<VueRenderer, ComponentPropsOrProps<TCmpOrArgs>>;
84
type StoryObj<TMetaOrCmpOrArgs = Args> = StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;
85
```
86

87
[Story Types](./story-types.md)
88

89
### Legacy Story APIs
90

91
Legacy story APIs for backwards compatibility with older Storybook versions and migration scenarios.
92

93
```typescript { .api }
94
function storiesOf(kind: string, module: NodeModule): StoryApi;
95
function configure(loader: Addon_Loadable, module: NodeModule): void;
96
function forceReRender(): void;
97
function raw(): any;
98
```
99

100
[Legacy APIs](./legacy-apis.md)
101

102
### Vue Rendering System
103

104
Core rendering functionality that handles Vue component mounting, lifecycle management, and DOM integration.
105

106
```typescript { .api }
107
function render(args: Args, context: StoryContext): VueRenderer['storyResult'];
108
function renderToCanvas(renderContext: RenderContext<VueRenderer>, canvasElement: VueRenderer['canvasElement']): void;
109
```
110

111
[Rendering System](./rendering.md)
112

113
### Story Decoration
114

115
Story decoration system for wrapping Vue components with additional context, providers, or styling.
116

117
```typescript { .api }
118
type Decorator<TArgs = StrictArgs> = DecoratorFunction<VueRenderer, TArgs>;
119
function decorateStory(storyFn: LegacyStoryFn<VueRenderer>, decorators: DecoratorFunction<VueRenderer>[]): LegacyStoryFn<VueRenderer>;
120
```
121

122
[Story Decoration](./decoration.md)
123

124
### Documentation Integration
125

126
Automatic documentation generation including component prop extraction, source code generation, and argument type inference.
127

128
```typescript { .api }
129
function extractArgTypes(component: VueRenderer['component']): StrictArgTypes | null;
130
function sourceDecorator(storyFn: any, context: StoryContext): ComponentOptions<Vue>;
131
```
132

133
[Documentation](./documentation.md)
134

135
## Types
136

137
### Core Renderer Types
138

139
```typescript { .api }
140
interface VueRenderer extends WebRenderer {
141
  component: Component<any, any, any, any> | AsyncComponent<any, any, any, any>;
142
  storyResult: StoryFnVueReturnType;
143
}
144

145
type StoryFnVueReturnType = Component<any, any, any, any> | AsyncComponent<any, any, any, any>;
146

147
type StoryContext<TArgs = StrictArgs> = GenericStoryContext<VueRenderer, TArgs>;
148
```
149

150
### Utility Types
151

152
```typescript { .api }
153
type Loader<TArgs = StrictArgs> = LoaderFunction<VueRenderer, TArgs>;
154
type Preview = ProjectAnnotations<VueRenderer>;
155

156
interface ShowErrorArgs {
157
  title: string;
158
  description: string;
159
}
160
```