0
# Legacy Story APIs
1

2
Legacy story APIs for backwards compatibility with older Storybook versions and migration scenarios. These APIs support CSF v1 and v2 story formats.
3

4
## Capabilities
5

6
### StoriesOf API
7

8
Creates a story collection for a component with fluent API for adding individual stories.
9

10
```typescript { .api }
11
/**
12
 * Create a story collection for a component
13
 * @param kind - The story kind/title (e.g., "Button")
14
 * @param module - The module containing the stories
15
 * @returns StoryApi for chaining story definitions
16
 */
17
function storiesOf(kind: string, module: NodeModule): StoryApi;
18

19
interface StoryApi {
20
  add(name: string, storyFn: StoryFunction): StoryApi;
21
  addParameters(parameters: Parameters): StoryApi;
22
  addDecorator(decorator: DecoratorFunction): StoryApi;
23
}
24
```
25

26
**Usage Example:**
27

28
```typescript
29
import { storiesOf } from "@storybook/vue";
30
import MyButton from "./MyButton.vue";
31

32
storiesOf("Example/Button", module)
33
  .addParameters({
34
    layout: "centered",
35
  })
36
  .add("Primary", () => ({
37
    components: { MyButton },
38
    template: '<MyButton :primary="true" label="Button" />',
39
  }))
40
  .add("Secondary", () => ({
41
    components: { MyButton },
42
    template: '<MyButton label="Button" />',
43
  }))
44
  .add("Large", () => ({
45
    components: { MyButton },
46
    template: '<MyButton size="large" label="Button" />',
47
  }));
48
```
49

50
### Configure Function
51

52
Configures how Storybook loads and processes stories from your project.
53

54
```typescript { .api }
55
/**
56
 * Configure storybook stories loading
57
 * @param loader - Function or array of functions that load stories
58
 * @param module - The module context
59
 */
60
function configure(loader: Addon_Loadable, module: NodeModule): void;
61

62
type Addon_Loadable = (() => void) | (() => void)[];
63
```
64

65
**Usage Example:**
66

67
```typescript
68
import { configure } from "@storybook/vue";
69

70
// Load all stories from the stories directory
71
function loadStories() {
72
  const req = require.context("../stories", true, /\.stories\.(js|ts)$/);
73
  req.keys().forEach((filename) => req(filename));
74
}
75

76
configure(loadStories, module);
77
```
78

79
### Force Re-render
80

81
Forces re-rendering of the current story, useful for debugging or manual refresh scenarios.
82

83
```typescript { .api }
84
/**
85
 * Force re-rendering of current story
86
 */
87
function forceReRender(): void;
88
```
89

90
**Usage Example:**
91

92
```typescript
93
import { forceReRender } from "@storybook/vue";
94

95
// In a story or addon
96
function refreshStory() {
97
  forceReRender();
98
}
99
```
100

101
### Raw Story Access
102

103
Provides access to raw story data for advanced use cases and debugging.
104

105
```typescript { .api }
106
/**
107
 * Access raw story data
108
 * @returns Raw story collection data
109
 */
110
function raw(): any;
111
```
112

113
**Usage Example:**
114

115
```typescript
116
import { raw } from "@storybook/vue";
117

118
// Get all story data
119
const allStories = raw();
120
console.log("Available stories:", allStories);
121
```
122

123
## Migration Notes
124

125
These legacy APIs are maintained for backwards compatibility but it's recommended to migrate to modern CSF (Component Story Format) for new projects:
126

127
### From storiesOf to CSF
128

129
**Legacy storiesOf:**
130
```typescript
131
storiesOf("Button", module)
132
  .add("Primary", () => ({
133
    components: { MyButton },
134
    template: '<MyButton :primary="true" />',
135
  }));
136
```
137

138
**Modern CSF:**
139
```typescript
140
export default {
141
  title: "Button",
142
  component: MyButton,
143
};
144

145
export const Primary = {
146
  args: {
147
    primary: true,
148
  },
149
};
150
```
151

152
### Benefits of Modern CSF
153

154
- Better TypeScript support with automatic type inference
155
- Improved IDE experience with autocomplete and error checking
156
- More maintainable story organization
157
- Better integration with Storybook tools and addons
158
- Simplified story parameterization with args