0
# Vue App Setup and Configuration
1

2
Configure Vue application plugins and initialization functions for Storybook stories, enabling proper Vue 3 app context and plugin integration within the Storybook environment.
3

4
## Capabilities
5

6
### Setup Function
7

8
Register Vue plugins and initialization functions that will be applied to all stories in your Storybook instance.
9

10
```typescript { .api }
11
/**
12
 * Sets up Vue app plugins and initialization functions for Storybook stories.
13
 * Functions registered with this function will be called with the Vue app instance
14
 * used for rendering each story, allowing for plugin setup and configuration.
15
 * 
16
 * @param fn - Function that receives the Vue app instance and optional story context
17
 */
18
function setup(fn: (app: App, storyContext?: StoryContext<VueRenderer>) => unknown): void;
19
```
20

21
**Usage Example:**
22

23
```typescript
24
import { setup } from "@storybook/vue3";
25
import { createPinia } from "pinia";
26
import { createI18n } from "vue-i18n";
27
import MyGlobalComponent from "./MyGlobalComponent.vue";
28

29
// Setup Pinia store
30
setup((app) => {
31
  app.use(createPinia());
32
});
33

34
// Setup i18n
35
setup((app) => {
36
  const i18n = createI18n({
37
    locale: "en",
38
    messages: {
39
      en: { hello: "Hello" },
40
      fr: { hello: "Bonjour" },
41
    },
42
  });
43
  app.use(i18n);
44
});
45

46
// Register global component
47
setup((app) => {
48
  app.component("MyGlobalComponent", MyGlobalComponent);
49
});
50
```
51

52
## Advanced Setup Patterns
53

54
### Plugin with Configuration
55

56
```typescript
57
import { setup } from "@storybook/vue3";
58
import { createRouter, createWebHashHistory } from "vue-router";
59

60
setup((app) => {
61
  const router = createRouter({
62
    history: createWebHashHistory(),
63
    routes: [
64
      { path: "/", component: { template: "<div>Home</div>" } },
65
      { path: "/about", component: { template: "<div>About</div>" } },
66
    ],
67
  });
68
  
69
  app.use(router);
70
});
71
```
72

73
### Multiple Plugin Setup
74

75
```typescript
76
import { setup } from "@storybook/vue3";
77
import { createPinia } from "pinia";
78
import Toast from "vue-toastification";
79
import "vue-toastification/dist/index.css";
80

81
// Setup state management
82
setup((app) => {
83
  app.use(createPinia());
84
});
85

86
// Setup toast notifications
87
setup((app) => {
88
  app.use(Toast, {
89
    timeout: 3000,
90
    closeOnClick: true,
91
    pauseOnFocusLoss: true,
92
    pauseOnHover: true,
93
  });
94
});
95
```
96

97
### Custom Plugin Registration
98

99
```typescript
100
import { setup } from "@storybook/vue3";
101

102
// Custom global properties
103
setup((app) => {
104
  app.config.globalProperties.$customApi = {
105
    fetchData: () => Promise.resolve("mock data"),
106
    formatCurrency: (amount) => `$${amount.toFixed(2)}`,
107
  };
108
});
109

110
// Custom directives
111
setup((app) => {
112
  app.directive("focus", {
113
    mounted(el) {
114
      el.focus();
115
    },
116
  });
117
});
118
```
119

120
## Integration with Preview Configuration
121

122
The setup function works alongside your `.storybook/preview.js` configuration:
123

124
```typescript
125
// .storybook/preview.js
126
import { setup } from "@storybook/vue3";
127
import { createPinia } from "pinia";
128

129
// Global setup
130
setup((app) => {
131
  app.use(createPinia());
132
});
133

134
export const parameters = {
135
  actions: { argTypesRegex: "^on[A-Z].*" },
136
  controls: {
137
    matchers: {
138
      color: /(background|color)$/i,
139
      date: /Date$/,
140
    },
141
  },
142
};
143
```
144

145
## Plugin Setup Best Practices
146

147
### Store Setup with Initial State
148

149
```typescript
150
import { setup } from "@storybook/vue3";
151
import { createPinia } from "pinia";
152
import { useUserStore } from "@/stores/user";
153

154
setup((app) => {
155
  const pinia = createPinia();
156
  app.use(pinia);
157
  
158
  // Initialize store with mock data for stories
159
  const userStore = useUserStore(pinia);
160
  userStore.setUser({
161
    id: 1,
162
    name: "John Doe",
163
    email: "john@example.com",
164
  });
165
});
166
```
167

168
### Environment-Specific Configuration
169

170
```typescript
171
import { setup } from "@storybook/vue3";
172

173
setup((app) => {
174
  // Mock API calls in Storybook environment
175
  app.provide("api", {
176
    get: (url) => Promise.resolve({ data: `Mock response for ${url}` }),
177
    post: (url, data) => Promise.resolve({ success: true }),
178
  });
179
});
180
```
181

182
## Type Definitions
183

184
```typescript { .api }
185
interface SetupFunction {
186
  (app: App, storyContext?: StoryContext<VueRenderer>): unknown;
187
}
188

189
declare global {
190
  var PLUGINS_SETUP_FUNCTIONS: Set<SetupFunction>;
191
}
192
```