-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathConfiguration.html
384 lines (377 loc) · 107 KB
/
Configuration.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Configuration | Vue Styleguidist</title>
<meta name="generator" content="VuePress 1.9.7">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
<link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#41B883">
<link rel="shortcut icon" type="image/x-icon" href="/assets/favicons/favicon.ico">
<script src="https://unpkg.com/thesemetrics@latest" async=""></script>
<meta name="description" content="Isolated Vue component development environment with a living style guide">
<meta prefix="og: http://ogp.me/ns#" property="og:title" content="Vue Styleguidist docs">
<meta prefix="og: http://ogp.me/ns#" property="twitter:title" content="Vue Styleguidist docs">
<meta prefix="og: http://ogp.me/ns#" property="og:type" content="website">
<meta prefix="og: http://ogp.me/ns#" property="og:description" content="Isolated Vue component development environment with a living style guide">
<meta prefix="og: http://ogp.me/ns#" property="og:image" content="/assets/logo.png">
<link rel="preload" href="/assets/css/0.styles.6cca0d72.css" as="style"><link rel="preload" href="/assets/js/app.3c212ffd.js" as="script"><link rel="preload" href="/assets/js/3.4a2a9d93.js" as="script"><link rel="preload" href="/assets/js/8.38adfb93.js" as="script"><link rel="prefetch" href="/assets/js/10.9deede29.js"><link rel="prefetch" href="/assets/js/11.ed576d58.js"><link rel="prefetch" href="/assets/js/12.cde92b93.js"><link rel="prefetch" href="/assets/js/13.96baa9be.js"><link rel="prefetch" href="/assets/js/14.be8d5859.js"><link rel="prefetch" href="/assets/js/15.053a800d.js"><link rel="prefetch" href="/assets/js/16.c86ff6eb.js"><link rel="prefetch" href="/assets/js/17.a5bd2f70.js"><link rel="prefetch" href="/assets/js/18.904d8817.js"><link rel="prefetch" href="/assets/js/19.c51e966c.js"><link rel="prefetch" href="/assets/js/20.319ae483.js"><link rel="prefetch" href="/assets/js/21.534c66d1.js"><link rel="prefetch" href="/assets/js/22.352e55a6.js"><link rel="prefetch" href="/assets/js/23.b02a1c93.js"><link rel="prefetch" href="/assets/js/24.4dd9e5be.js"><link rel="prefetch" href="/assets/js/4.057c31d3.js"><link rel="prefetch" href="/assets/js/5.95773a2d.js"><link rel="prefetch" href="/assets/js/6.11513ce4.js"><link rel="prefetch" href="/assets/js/7.c2bfa264.js"><link rel="prefetch" href="/assets/js/9.0bad6c21.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.271cdf46.js">
<link rel="stylesheet" href="/assets/css/0.styles.6cca0d72.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">Vue Styleguidist</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/GettingStarted.html" class="nav-link">
Docs
</a></div><div class="nav-item"><a href="/Examples.html" class="nav-link">
Examples
</a></div><div class="nav-item"><a href="/VueCLI3doc.html" class="nav-link">
Vue CLI Plugin
</a></div><div class="nav-item"><a href="/Configuration.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
Reference
</a></div> <a href="https://github.com/vue-styleguidist/vue-styleguidist" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/GettingStarted.html" class="nav-link">
Docs
</a></div><div class="nav-item"><a href="/Examples.html" class="nav-link">
Examples
</a></div><div class="nav-item"><a href="/VueCLI3doc.html" class="nav-link">
Vue CLI Plugin
</a></div><div class="nav-item"><a href="/Configuration.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
Reference
</a></div> <a href="https://github.com/vue-styleguidist/vue-styleguidist" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><a href="/Configuration.html" aria-current="page" class="active sidebar-link">Configuration</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/Configuration.html#assetsdir" class="sidebar-link">assetsDir</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#codesplit" class="sidebar-link">codeSplit</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#compilerpackage" class="sidebar-link">compilerPackage</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#compilerconfig" class="sidebar-link">compilerConfig</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#components" class="sidebar-link">components</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#context" class="sidebar-link">context</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#contextdependencies" class="sidebar-link">contextDependencies</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#configureserver" class="sidebar-link">configureServer</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#copycodebutton" class="sidebar-link">copyCodeButton</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#dangerouslyupdatewebpackconfig" class="sidebar-link">dangerouslyUpdateWebpackConfig</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#defaultexample" class="sidebar-link">defaultExample</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#displayorigins" class="sidebar-link">displayOrigins</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#getcomponentpathline" class="sidebar-link">getComponentPathLine</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#editorconfig" class="sidebar-link">editorConfig</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#getexamplefilename" class="sidebar-link">getExampleFilename</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#enhancepreviewapp" class="sidebar-link">enhancePreviewApp</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#examplemode" class="sidebar-link">exampleMode</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#ignore" class="sidebar-link">ignore</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#jssthemededitor" class="sidebar-link">jssThemedEditor</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#jsxincomponents" class="sidebar-link">jsxInComponents</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#jsxinexamples" class="sidebar-link">jsxInExamples</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#logger" class="sidebar-link">logger</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#locallyregistercomponents" class="sidebar-link">locallyRegisterComponents</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#minimize" class="sidebar-link">minimize</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#mountpointid" class="sidebar-link">mountPointId</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#pagepersection" class="sidebar-link">pagePerSection</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#printbuildinstructions" class="sidebar-link">printBuildInstructions</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#printserverinstructions" class="sidebar-link">printServerInstructions</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#previewdelay" class="sidebar-link">previewDelay</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#propsparser" class="sidebar-link">propsParser</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#progressbar" class="sidebar-link">progressBar</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#require" class="sidebar-link">require</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#renderrootjsx" class="sidebar-link">renderRootJsx</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#ribbon" class="sidebar-link">ribbon</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#sections" class="sidebar-link">sections</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#serverhost" class="sidebar-link">serverHost</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#serverport" class="sidebar-link">serverPort</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#showsidebar" class="sidebar-link">showSidebar</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#simpleeditor" class="sidebar-link">simpleEditor</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#skipcomponentswithoutexample" class="sidebar-link">skipComponentsWithoutExample</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#styleguidecomponents" class="sidebar-link">styleguideComponents</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#styleguidedir" class="sidebar-link">styleguideDir</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#styleguidepublicpath" class="sidebar-link">styleguidePublicPath</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#styles" class="sidebar-link">styles</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#template" class="sidebar-link">template</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#theme" class="sidebar-link">theme</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#title" class="sidebar-link">title</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#sortprops" class="sidebar-link">sortProps</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#tocmode" class="sidebar-link">tocMode</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#updatedocs" class="sidebar-link">updateDocs</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#updateexample" class="sidebar-link">updateExample</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#usagemode" class="sidebar-link">usageMode</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#validextends" class="sidebar-link">validExtends</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#verbose" class="sidebar-link">verbose</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#version" class="sidebar-link">version</a></li><li class="sidebar-sub-header"><a href="/Configuration.html#webpackconfig" class="sidebar-link">webpackConfig</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="configuration"><a href="#configuration" class="header-anchor">#</a> Configuration</h1> <p>By default, Vue styleguidist will look for <code>styleguide.config.js</code> file in your project’s root folder. You can change the location of the config file using <code>--config</code> <a href="/docs/CLI.html">CLI</a> option.</p> <h2 id="assetsdir"><a href="#assetsdir" class="header-anchor">#</a> <code>assetsDir</code></h2> <p>Type: <code>String</code>, optional</p> <p>Your application static assets folder, will be accessible as <code>/</code> in the style guide dev server.</p> <h2 id="codesplit"><a href="#codesplit" class="header-anchor">#</a> <code>codeSplit</code></h2> <p>Type: <code>Boolean</code>, default: true</p> <p>By default vue-styleguidist will build one single bundle for all your javascript. When this flag is on, the editor (CodeMirror) is loaded as a separate bundle and so is the compiler. Each of those 2 bundles are about 400Kb. It allows for a faster initial load.</p> <blockquote><p><strong>Note</strong>: When you use this option and have a babel-loader in your webpack config, make sure that you either ignore <code>node_modules</code> in your babel loader or that you have the <a href="https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import" target="_blank" rel="noopener noreferrer">proper plugin<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> for code splitting with babel. If not, you might get the following error:</p> <p><code>SyntaxError: Support for the experimental syntax 'dynamicImport' isn't currently enabled</code></p></blockquote> <h2 id="compilerpackage"><a href="#compilerpackage" class="header-anchor">#</a> <code>compilerPackage</code></h2> <p>Type: <code>String</code>, optional</p> <p>Path or name of a module that exports a <code>compile</code> and a <code>getImports</code> function. It will be used to compile your live examples. vue-styleguidist will do <code>require(config.compilerPackage)</code> to get the <code>compile</code> function.</p> <ul><li>Checkout <a href="https://github.com/vue-styleguidist/vue-styleguidist/blob/dev/packages/vue-styleguidist/src/loaders/examples-loader.ts" target="_blank" rel="noopener noreferrer">examples-loader.ts<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> to see the implementation on the node side.</li> <li>See <a href="https://github.com/vue-styleguidist/vue-styleguidist/blob/dev/packages/vue-styleguidist/src/client/rsg-components/Preview/Preview.js" target="_blank" rel="noopener noreferrer">Preview.js<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> to see how it is used in the frontend.</li></ul> <h2 id="compilerconfig"><a href="#compilerconfig" class="header-anchor">#</a> <code>compilerConfig</code></h2> <p>Type: <code>Object</code>, default: <code>{ objectAssign: 'Object.assign' }</code></p> <p>Styleguidist uses <code>vue-inbrowser-compiler</code> to bundle typescript/ES6 modules code on the frontend. These options are passed to the compile function.</p> <h2 id="components"><a href="#components" class="header-anchor">#</a> <code>components</code></h2> <p>Type: <code>String</code>, <code>Function</code> or <code>Array</code>, default: <code>src/components/**/*.vue</code></p> <ul><li>when <code>String</code>: a <a href="https://github.com/isaacs/node-glob#glob-primer" target="_blank" rel="noopener noreferrer">glob pattern<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> that matches all your component modules.</li> <li>when <code>Function</code>: a function that returns an array of module paths.</li> <li>when <code>Array</code>: an array of module paths.</li></ul> <p>All paths are relative to config folder.</p> <p>See examples in the <a href="/docs/Components.html#components">Components section</a>.</p> <h2 id="context"><a href="#context" class="header-anchor">#</a> <code>context</code></h2> <p>Type: <code>Object</code>, optional</p> <p>Modules that will be available for examples. You can use it for utility functions like Lodash or for data fixtures.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">context</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">map</span><span class="token operator">:</span> <span class="token string">'lodash/map'</span><span class="token punctuation">,</span>
<span class="token literal-property property">users</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'fixtures/users'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Then you can use them in any example:</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Message</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token function">map</span><span class="token punctuation">(</span>users<span class="token punctuation">,</span> <span class="token string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">', '</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Message</span></span><span class="token punctuation">></span></span>
</code></pre></div><h2 id="contextdependencies"><a href="#contextdependencies" class="header-anchor">#</a> <code>contextDependencies</code></h2> <p>Type: <code>String[]</code>, optional</p> <p>Array of absolute paths that allow you to specify absolute paths of directories to watch for additions or removals of components.</p> <p>By default Styleguidist uses common parent directory of your components.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">contextDependencies</span><span class="token operator">:</span> <span class="token punctuation">[</span>path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'lib/components'</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="configureserver"><a href="#configureserver" class="header-anchor">#</a> <code>configureServer</code></h2> <p>Type: <code>Function</code>, optional</p> <p>Function that allows you to add endpoints to the underlying Express server:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function">configureServer</span><span class="token punctuation">(</span><span class="token parameter">app</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// `app` is the instance of the express server running Styleguidist</span>
app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/custom-endpoint'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
res<span class="token punctuation">.</span><span class="token function">status</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">response</span><span class="token operator">:</span> <span class="token string">'Server invoked'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Your components will be able to invoke the URL <code>http://localhost:6060/custom-endpoint</code> from their examples.</p> <h2 id="copycodebutton"><a href="#copycodebutton" class="header-anchor">#</a> <code>copyCodeButton</code></h2> <p>Type: <code>Boolean</code>, default: <code>false</code></p> <p>Adds a little button on the top right hand corner of the editor to copy the contents of the editor into the clipboard.</p> <h2 id="dangerouslyupdatewebpackconfig"><a href="#dangerouslyupdatewebpackconfig" class="header-anchor">#</a> <code>dangerouslyUpdateWebpackConfig</code></h2> <p>Type: <code>Function</code>, optional</p> <blockquote><p><strong>Warning:</strong> You are likely to break Vue styleguidist using this options, try to use <a href="#webpackconfig">webpackConfig</a> option instead.</p></blockquote> <p>Allows you to modify webpack config without any restrictions.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function">dangerouslyUpdateWebpackConfig</span><span class="token punctuation">(</span><span class="token parameter">webpackConfig<span class="token punctuation">,</span> env</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// WARNING: inspect Vue styleguidist Webpack config before modifying it, otherwise you may break Vue styleguidist</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>webpackConfig<span class="token punctuation">)</span>
webpackConfig<span class="token punctuation">.</span>externals <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">jquery</span><span class="token operator">:</span> <span class="token string">'jQuery'</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> webpackConfig
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="defaultexample"><a href="#defaultexample" class="header-anchor">#</a> <code>defaultExample</code></h2> <p>Type: <code>Boolean</code> or <code>String</code>, default: <code>false</code></p> <p>For components that do not have an example, a default one can be used. When set to <code>true</code>, the <a href="https://github.com/vue-styleguidist/vue-styleguidist/blob/delivery/packages/vue-styleguidist/scripts/templates/DefaultExample.md" target="_blank" rel="noopener noreferrer">DefaultExample.md<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> is used, or you can provide the path to your own example Markdown file.</p> <p>When writing your own default example file, <code>__COMPONENT__</code> will be replaced by the actual component name at compile time.</p> <h2 id="displayorigins"><a href="#displayorigins" class="header-anchor">#</a> <code>displayOrigins</code></h2> <p>Type: <code>Boolean</code>, default: <code>false</code></p> <p>When turned on, displays if a prop, event, slot or methods is from the current file or is configured in a mixin or an extended component.</p> <p>If it is external, it displays the name of the component and on hover displays the relative path to the file.</p> <h2 id="getcomponentpathline"><a href="#getcomponentpathline" class="header-anchor">#</a> <code>getComponentPathLine</code></h2> <p>Type: <code>Function</code>, default: component file name</p> <p>Function that returns a component path line (displayed under the component name).</p> <p>For example, instead of <code>components/Button/Button.vue</code> you can print <code>import Button from 'components/Button';</code>:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function">getComponentPathLine</span><span class="token punctuation">(</span><span class="token parameter">componentPath</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> name <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">basename</span><span class="token punctuation">(</span>componentPath<span class="token punctuation">,</span> <span class="token string">'.vue'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> dir <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">dirname</span><span class="token punctuation">(</span>componentPath<span class="token punctuation">)</span>
<span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">import </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> from '</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>dir<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">';</span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="editorconfig"><a href="#editorconfig" class="header-anchor">#</a> <code>editorConfig</code></h2> <p>Type: <code>Object</code>, default: <a href="https://github.com/vue-styleguidist/vue-styleguidist/blob/delivery/packages/vue-styleguidist/src/scripts/schemas/config.ts#L103-L112" target="_blank" rel="noopener noreferrer">scripts/schemas/config.js<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Source code editor options, see <a href="https://codemirror.net/doc/manual.html#config" target="_blank" rel="noopener noreferrer">CodeMirror docs<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> for all available options.</p> <blockquote><p><strong>NOTE :</strong> From version 4.0.0, Prism is the editor by default as it is much lighter. Turn off <a href="#simpleEditor">simpleEditor</a> to use CodeMirror and leverage this config.</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token comment">// ...</span>
<span class="token literal-property property">editorConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">theme</span><span class="token operator">:</span> <span class="token string">'base16-light'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">simpleEditor</span><span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
</code></pre></div></blockquote> <h2 id="getexamplefilename"><a href="#getexamplefilename" class="header-anchor">#</a> <code>getExampleFilename</code></h2> <p>Type: <code>Function</code>, default: finds <code>Readme.md</code> or <code>ComponentName.md</code> in the component folder</p> <p>Function that returns examples file path for a given component path.</p> <p>For example, instead of <code>Readme.md</code> you can use <code>ComponentName.examples.md</code>:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function">getExampleFilename</span><span class="token punctuation">(</span><span class="token parameter">componentPath</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> componentPath<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.jsx?$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token string">'.examples.md'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="enhancepreviewapp"><a href="#enhancepreviewapp" class="header-anchor">#</a> <code>enhancePreviewApp</code></h2> <p>Type <code>String</code>, optional</p> <p>Allows in vue 3 styleguides to register <strong>global plugins</strong> and <strong>global directives</strong> in the examples preview.</p> <p>For example:</p> <p>Reference the preview file path in the <code>styleguide.config.js</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// styleguide.config.js</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token comment">// ...</span>
<span class="token literal-property property">enhancePreviewApp</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'styleguide/preview.js'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Then update your app in it with whatever you want.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// styleguide/preview.js</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineEnhanceApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue-styleguidist'</span>
<span class="token keyword">import</span> focusDirective <span class="token keyword">from</span> <span class="token string">'../src/directives/v-focus'</span><span class="token punctuation">;</span>
<span class="token comment">// The export here MUST be default or module.export</span>
<span class="token comment">// this is what is imported by the styleguide</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineEnhanceApp</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">app</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
app<span class="token punctuation">.</span><span class="token function">directive</span><span class="token punctuation">(</span><span class="token string">'focus'</span><span class="token punctuation">,</span> focusDirective<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><blockquote><p>NOTE: If you use TypeScript, this file can be TypeScript as well</p></blockquote> <h2 id="examplemode"><a href="#examplemode" class="header-anchor">#</a> <code>exampleMode</code></h2> <p>Type: <code>'collapse' | 'hide' | 'expand'</code>, default: <code>collapse</code></p> <p>Defines the initial state of the example code tab:</p> <ul><li><code>collapse</code>: collapses the tab by default.</li> <li><code>hide</code>: hide the tab and it can´t be toggled in the UI.</li> <li><code>expand</code>: expand the tab by default.</li></ul> <h2 id="ignore"><a href="#ignore" class="header-anchor">#</a> <code>ignore</code></h2> <p>Type: <code>String[]</code>, default: <code>['**/__tests__/**']</code></p> <p>Array of <a href="https://github.com/isaacs/node-glob#glob-primer" target="_blank" rel="noopener noreferrer">glob pattern<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> that should not be included in the style guide.</p> <blockquote><p><strong>Note:</strong> You should pass glob patterns, for example, use <code>**/components/Button.vue</code> instead of <code>components/Button.vue</code>.</p></blockquote> <h2 id="jssthemededitor"><a href="#jssthemededitor" class="header-anchor">#</a> <code>jssThemedEditor</code></h2> <p>Type: <code>Boolean</code>, default: <code>true</code></p> <p>Should integrated PrismJs editors be themed using JSS in the theme option.</p> <p>If you want to use a theme defined in CSS, set this to false and require the CSS file in the <code>require</code> config.</p> <p><a href="https://github.com/PrismJS/prism-themes/" target="_blank" rel="noopener noreferrer">prism themes repo<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <blockquote><p><strong>Note:</strong> There is <a href="https://github.com/satya164/react-simple-code-editor/issues/56" target="_blank" rel="noopener noreferrer">a bug in prism editor<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> that prevents us from changing the editor's background and font-color easily. Workaround: If you get a theme with</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">pre[class*='language-']</span> <span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0.5em 0<span class="token punctuation">;</span>
<span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> #1e1e1e<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Use the <code>div.prism-editor</code> class to change the background instead</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">pre[class*='language-']</span> <span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0.5em 0<span class="token punctuation">;</span>
<span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">div.prism-editor</span> <span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> #1e1e1e<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>checkout <a href="https://github.com/vue-styleguidist/vue-styleguidist/blob/dev/examples/customised/styleguide/vsc-prism.css" target="_blank" rel="noopener noreferrer">examples/customised<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> for an example of implementation</p></blockquote> <h2 id="jsxincomponents"><a href="#jsxincomponents" class="header-anchor">#</a> <code>jsxInComponents</code></h2> <p>Type: <code>Boolean</code>, default: <code>true</code></p> <p>Do your components contain JSX syntax? Since some TypeScript syntax can sometimes conflict with JSX, it ca be useful to disble it when needed. The following TypeScript code would fail parsing if this flag is not set to false.</p> <div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token keyword">function</span> <span class="token function">initDatepicker</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">;</span><span class="token punctuation">(</span><span class="token operator"><</span><span class="token builtin">any</span><span class="token operator">></span>window<span class="token punctuation">)</span><span class="token punctuation">.</span>$<span class="token punctuation">.</span><span class="token function">datetimepicker</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token comment">// babel parser will think that `<any>` is actually jsx</span>
<span class="token comment">//...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="jsxinexamples"><a href="#jsxinexamples" class="header-anchor">#</a> <code>jsxInExamples</code></h2> <p>Type: <code>Boolean</code>, default: <code>false</code></p> <p>If your examples are written in JSX, you will need this flag on.</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token punctuation">/></span></span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p><strong>Note:</strong> When this flag is on, the pseudo-jsx examples will not work anymore. Example should be written with proper vue syntax.</p></blockquote> <h2 id="logger"><a href="#logger" class="header-anchor">#</a> <code>logger</code></h2> <p>Type: <code>Object</code>, by default will use <code>console.*</code> in CLI or nothing in Node.js API</p> <p>Custom logger functions:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">logger</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// One of: info, debug, warn</span>
<span class="token comment">// Suppress messages</span>
<span class="token function-variable function">info</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// Override display function</span>
<span class="token function-variable function">warn</span><span class="token operator">:</span> <span class="token parameter">message</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">warn</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">NOOOOOO: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>message<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="locallyregistercomponents"><a href="#locallyregistercomponents" class="header-anchor">#</a> <code>locallyRegisterComponents</code></h2> <p>Type: <code>Boolean</code>, default: <code>false</code></p> <p>By default, <code>vue-styleguidist</code> registers all components globally. This can be an issue when:</p> <ul><li>Multiple components are sharing the same name OR</li> <li>Components are changing behaviour if another component is registered</li></ul> <p>In this case, set <code>locallyRegisterComponents</code> to <code>true</code>. It will register components only in the examples of their documentation.</p> <p>Though if you need to register an additionl component and you are forced to use this behaviour, proceed like this:</p> <ol><li>Write examples using SFC format</li> <li>Explicitly require or import all needed components</li> <li>Register them in your example</li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> MyButton <span class="token keyword">from</span> <span class="token string">'./src/components/MyButton.vue'</span>
<span class="token keyword">import</span> MyIcon <span class="token keyword">from</span> <span class="token string">'./src/components/MyIcon.vue'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> MyButton<span class="token punctuation">,</span> MyIcon <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MyButton</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MyIcon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Save<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>Save Form<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MyButton</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
</code></pre></div><blockquote><p><strong>Note</strong> This can be done as well using a <code>new Vue()</code> script</p></blockquote> <h2 id="minimize"><a href="#minimize" class="header-anchor">#</a> <code>minimize</code></h2> <p>Type: <code>boolean</code>, default: <code>true</code></p> <p>If you wish to remove minimization from the build process to help with debugging or to accelate netlify build time on PR, turn this one off.</p> <h2 id="mountpointid"><a href="#mountpointid" class="header-anchor">#</a> <code>mountPointId</code></h2> <p>Type: <code>string</code>, default: <code>rsg-root</code></p> <p>The ID of a DOM element where Styleguidist mounts.</p> <h2 id="pagepersection"><a href="#pagepersection" class="header-anchor">#</a> <code>pagePerSection</code></h2> <p>Type: <code>Boolean</code>, default: <code>false</code></p> <p>Render one section or component per page.</p> <p>If <code>true</code>, each section will be a single page.</p> <p>The value may depends on a current environment:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">pagePerSection</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">!==</span> <span class="token string">'production'</span>
<span class="token punctuation">}</span>
</code></pre></div><p>To isolate section’s children as single pages (subroutes), add <code>sectionDepth</code> into each section with the number of subroutes (depth) to render as single pages.</p> <p>For example:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">pagePerSection</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token literal-property property">sections</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Documentation'</span><span class="token punctuation">,</span>
<span class="token literal-property property">sections</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Files'</span><span class="token punctuation">,</span>
<span class="token literal-property property">sections</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'First File'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Second File'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token comment">// Will show "Documentation" and "Files" as single pages, filtering its children</span>
<span class="token literal-property property">sectionDepth</span><span class="token operator">:</span> <span class="token number">2</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Components'</span><span class="token punctuation">,</span>
<span class="token literal-property property">sections</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Buttons'</span><span class="token punctuation">,</span>
<span class="token literal-property property">sections</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'WrapperButton'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token comment">// Will show "Components" as single page, filtering its children</span>
<span class="token literal-property property">sectionDepth</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Examples'</span><span class="token punctuation">,</span>
<span class="token literal-property property">sections</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Case 1'</span><span class="token punctuation">,</span>
<span class="token literal-property property">sections</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Buttons'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token comment">// There is no subroutes, "Examples" will show all its children on a page</span>
<span class="token literal-property property">sectionDepth</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="printbuildinstructions"><a href="#printbuildinstructions" class="header-anchor">#</a> <code>printBuildInstructions</code></h2> <p>Type: <code>Function</code>, optional</p> <p>Function that allows you to override the printing of build messages to console.log.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function">printBuildInstructions</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Style guide published to </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>config<span class="token punctuation">.</span>styleguideDir<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">. Something else interesting.</span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="printserverinstructions"><a href="#printserverinstructions" class="header-anchor">#</a> <code>printServerInstructions</code></h2> <p>Type: <code>Function</code>, optional</p> <p>Function that allows you to override the printing of local dev server messages to console.log.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">serverHost</span><span class="token operator">:</span> <span class="token string">'your-domain'</span><span class="token punctuation">,</span>
<span class="token function">printServerInstructions</span><span class="token punctuation">(</span><span class="token parameter">config<span class="token punctuation">,</span> <span class="token punctuation">{</span> isHttps <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Local style guide: http://</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>config<span class="token punctuation">.</span>serverHost<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="previewdelay"><a href="#previewdelay" class="header-anchor">#</a> <code>previewDelay</code></h2> <p>Type: <code>Number</code>, default: 500</p> <p>Debounce time in milliseconds used before render the changes from the editor. While typing code the preview will not be updated.</p> <h2 id="propsparser"><a href="#propsparser" class="header-anchor">#</a> <code>propsParser</code></h2> <p>Type: <code>Function</code>, optional</p> <p>Function that allows you to override the mechanism used to parse props from a source file. Default mechanism is using <a href="https://github.com/vue-styleguidist/vue-docgen-api" target="_blank" rel="noopener noreferrer">vue-docgen-api<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> to parse props.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function">propsParser</span><span class="token punctuation">(</span><span class="token parameter">filePath<span class="token punctuation">,</span> source</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-docgen-api'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>filePath<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="progressbar"><a href="#progressbar" class="header-anchor">#</a> <code>progressBar</code></h2> <p>Type: <code>Boolean</code>, default: true</p> <p>Should styleguidist show a progress bar using <code>webpack.ProgressPlugin</code> while building.</p> <blockquote><p><strong>Note:</strong>: Builds on CI might be slower when this is active. You might want to make this parameter dependent on CI environement variables.</p></blockquote> <h2 id="require"><a href="#require" class="header-anchor">#</a> <code>require</code></h2> <p>Type: <code>String[]</code>, optional</p> <p>Modules that are required for your style guide. Useful for third-party styles or polyfills.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">require</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token string">'babel-polyfill'</span><span class="token punctuation">,</span>
path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'styleguide/styles.css'</span><span class="token punctuation">)</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p><strong>Note:</strong> This will add a separate webpack entry for each array item.</p></blockquote> <p>Don’t forget to add webpack loaders for each file you add here. For example, to require a CSS file you’ll need:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">webpackConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'style-loader'</span><span class="token punctuation">,</span> <span class="token string">'css-loader'</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>See <a href="/docs/Webpack.html">Configuring webpack</a> for mode details.</p> <h2 id="renderrootjsx"><a href="#renderrootjsx" class="header-anchor">#</a> <code>renderRootJsx</code></h2> <p>Type: <code>String</code>, optional</p> <p>Modifies the root component of the previews of the examples, receives as a parameter the preview component, must return a <a href="https://vuejs.org/v2/guide/render-function.html" target="_blank" rel="noopener noreferrer">component jsx<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. It is useful when you want to create a container to all your examples by default, especially when you use a third library.</p> <p>An example</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// config/styleguide.root.js</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">previewComponent</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token parameter">createElement</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">createElement</span><span class="token punctuation">(</span>previewComponent<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">renderRootJsx</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'config/styleguide.root.js'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="ribbon"><a href="#ribbon" class="header-anchor">#</a> <code>ribbon</code></h2> <p>Type: <code>Object</code>, optional</p> <p>Shows 'Fork Me' ribbon in the top-right corner. If <code>ribbon</code> key is present, then it's required to add <code>url</code> property; <code>text</code> property is optional. If you want to change styling of the ribbon, please, refer to the <a href="#theme">theme section</a>.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">ribbon</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://example.com/'</span><span class="token punctuation">,</span>
<span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Fork me on GitHub'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="sections"><a href="#sections" class="header-anchor">#</a> <code>sections</code></h2> <p>Type: <code>Array</code>, optional</p> <p>Allows components to be grouped into sections with a title and overview content. Sections can also be content only, with no associated components (for example, a textual introduction). Sections can be nested.</p> <p>See examples of <a href="/docs/Components.html#sections">sections configuration</a>.</p> <h2 id="serverhost"><a href="#serverhost" class="header-anchor">#</a> <code>serverHost</code></h2> <p>Type: <code>String</code>, default: <code>0.0.0.0</code></p> <p>Dev server name.</p> <h2 id="serverport"><a href="#serverport" class="header-anchor">#</a> <code>serverPort</code></h2> <p>Type: <code>Number</code>, default: <code>6060</code></p> <p>Dev server port.</p> <h2 id="showsidebar"><a href="#showsidebar" class="header-anchor">#</a> <code>showSidebar</code></h2> <p>Type: <code>Boolean</code>, default: <code>true</code></p> <p>Toggle sidebar visibility. Sidebar will be hidden when opening components or examples in isolation mode even if this value is set to <code>true</code>. When set to <code>false</code>, sidebar will always be hidden.</p> <h2 id="simpleeditor"><a href="#simpleeditor" class="header-anchor">#</a> <code>simpleEditor</code></h2> <p>Type: <code>Boolean</code>, default: <code>false</code></p> <p>Avoid loading CodeMirror and reduce bundle size significantly, use <a href="https://prismjs.com/" target="_blank" rel="noopener noreferrer">prism.js<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> for code highlighting. Warning: editor options will not be mapped over.</p> <h2 id="skipcomponentswithoutexample"><a href="#skipcomponentswithoutexample" class="header-anchor">#</a> <code>skipComponentsWithoutExample</code></h2> <p>Type: <code>Boolean</code>, default: <code>false</code></p> <p>Ignore components that don’t have an example file (as determined by <a href="#getexamplefilename">getExampleFilename</a>). These components won’t be accessible from other examples unless you <a href="/docs/Cookbook.html#how-to-hide-some-components-in-style-guide-but-make-them-available-in-examples">manually <code>require</code> them</a>.</p> <h2 id="styleguidecomponents"><a href="#styleguidecomponents" class="header-anchor">#</a> <code>styleguideComponents</code></h2> <p>Type: <code>Object</code>, optional</p> <p>Override React components used to render the style guide.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">styleguideComponents</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">Wrapper</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'styleguide/components/Wrapper'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token literal-property property">StyleGuideRenderer</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>
__dirname<span class="token punctuation">,</span>
<span class="token string">'styleguide/components/StyleGuide'</span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>See an example of <a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/delivery/examples/customised" target="_blank" rel="noopener noreferrer">customized style guide<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <p>If you want to wrap, rather than replace a component, make sure to import the default implementation using the full path to <code>vue-styleguidist</code>. See an example of <a href="https://github.com/vue-styleguidist/vue-styleguidist/blob/delivery/examples/customised/styleguide/components/SectionsRenderer.js" target="_blank" rel="noopener noreferrer">wrapping a Styleguidist component<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <p><strong>Note</strong>: these components are not guaranteed to be safe from breaking changes in vue-styleguidist updates.</p> <h2 id="styleguidedir"><a href="#styleguidedir" class="header-anchor">#</a> <code>styleguideDir</code></h2> <p>Type: <code>String</code>, default: <code>styleguide</code></p> <p>Folder for static HTML style guide generated with <code>styleguidist build</code> command.</p> <h2 id="styleguidepublicpath"><a href="#styleguidepublicpath" class="header-anchor">#</a> <code>styleguidePublicPath</code></h2> <p>Type: <code>String</code>, optional</p> <p>Configures the prefix of the build and server urls.</p> <p>Example: If set to <code>/mystyleguide</code> the url for dev server will be <code>htp://localhost:6060/mystyleguide</code></p> <h2 id="styles"><a href="#styles" class="header-anchor">#</a> <code>styles</code></h2> <p>Type: <code>Object</code>, <code>String</code> or <code>Function</code>, optional</p> <p>Customize styles of any Styleguidist’s component using an object, a function returning said object or a file path to a file exporting said styles.</p> <p>See example in the <a href="/docs/Cookbook.html#how-to-change-styles-of-a-style-guide">cookbook</a>.</p> <blockquote><p><strong>Note:</strong> Using a function allows access to theme variables as seen in the example below. See available <a href="https://github.com/styleguidist/react-styleguidist/blob/master/src/client/styles/theme.ts" target="_blank" rel="noopener noreferrer">theme variables<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. The returned object folows the same format as when configured as a litteral.</p></blockquote> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function-variable function">styles</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">theme</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token literal-property property">Logo</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">logo</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// we can now change the color used in the logo item to use the theme's `link` color</span>
<span class="token literal-property property">color</span><span class="token operator">:</span> theme<span class="token punctuation">.</span>color<span class="token punctuation">.</span>link
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>Note:</strong> If using a file path, it has to be absolute or relative to the config file.</p> <h2 id="template"><a href="#template" class="header-anchor">#</a> <code>template</code></h2> <p>Type: <code>Object</code> or <code>Function</code>, optional.</p> <p>Change HTML for the style guide app.</p> <p>An object with options to add a favicon, meta tags, inline JavaScript or CSS, etc. See <a href="https://www.npmjs.com/package/@vxna/mini-html-webpack-template" target="_blank" rel="noopener noreferrer">@vxna/mini-html-webpack-template docs<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">favicon</span><span class="token operator">:</span> <span class="token string">'https://assets-cdn.github.com/favicon.ico'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>A function that returns an HTML string, see <a href="https://github.com/styleguidist/mini-html-webpack-plugin#custom-templates" target="_blank" rel="noopener noreferrer">mini-html-webpack-plugin docs<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <h2 id="theme"><a href="#theme" class="header-anchor">#</a> <code>theme</code></h2> <p>Type: <code>Object</code> or <code>String</code>, optional</p> <p>Customize style guide UI fonts, colors, etc. using a theme object or the path to a file exporting such object.</p> <p>The path is relative to the config file or absolute.</p> <p>See example in the <a href="/docs/Cookbook.html#how-to-change-styles-of-a-style-guide">cookbook</a>.</p> <blockquote><p><strong>Note:</strong> See available <a href="https://github.com/styleguidist/react-styleguidist/blob/master/src/client/styles/theme.ts" target="_blank" rel="noopener noreferrer">theme variables<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <p><strong>Note:</strong> Styles use <a href="https://github.com/cssinjs/jss/blob/master/docs/jss-syntax.md" target="_blank" rel="noopener noreferrer">JSS<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> with these plugins: <a href="https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-isolate" target="_blank" rel="noopener noreferrer">jss-plugin-isolate<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, <a href="https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-nested" target="_blank" rel="noopener noreferrer">jss-plugin-nested<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, <a href="https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-camel-case" target="_blank" rel="noopener noreferrer">jss-plugin-camel-case<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, <a href="https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-default-unit" target="_blank" rel="noopener noreferrer">jss-plugin-default-unit<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, <a href="https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-compose" target="_blank" rel="noopener noreferrer">jss-plugin-compose<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> and <a href="https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-global" target="_blank" rel="noopener noreferrer">jss-plugin-global<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <p><strong>Note:</strong> Use <a href="https://github.com/facebook/react" target="_blank" rel="noopener noreferrer">React Developer Tools<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> to find component and style names. For example a component <code><LogoRenderer><h1 className="rsg--logo-53"></code> corresponds to an example above.</p></blockquote> <blockquote><p><strong>Note:</strong> This theme will only apply to styleguidist components. The side menu, the section titles, the prop definitions. The components you showcase will not be affected.</p></blockquote> <h2 id="title"><a href="#title" class="header-anchor">#</a> <code>title</code></h2> <p>Type: <code>String</code>, default: <code><app name from package.json> Style Guide</code></p> <p>Style guide title.</p> <h2 id="sortprops"><a href="#sortprops" class="header-anchor">#</a> <code>sortProps</code></h2> <p>Type: <code>Function</code>, optional</p> <p>Function that sorts component props. By default props are sorted such that required props come first, optional props come second. Props in both groups are sorted by their property names.</p> <p>To disable sorting, use the identity function:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function-variable function">sortProps</span><span class="token operator">:</span> <span class="token parameter">props</span> <span class="token operator">=></span> props
<span class="token punctuation">}</span>
</code></pre></div><h2 id="tocmode"><a href="#tocmode" class="header-anchor">#</a> <code>tocMode</code></h2> <p>Type: <code>String</code> default: <code>expand</code></p> <p>Defines if the table of contents sections will behave like an accordion:</p> <ul><li><code>collapse</code>: All sections are collapsed by default</li> <li><code>expand</code>: Sections cannot be collapsed in the Table Of Contents</li></ul> <p>Collapse the sections created in the sidebar to reduce the height of the sidebar. This can be useful in large codebases with lots of components to avoid having to scroll too far.</p> <h2 id="updatedocs"><a href="#updatedocs" class="header-anchor">#</a> <code>updateDocs</code></h2> <p>Type: <code>Function</code>, optional</p> <p>Function that modifies props, methods, and metadata after parsing a source file. For example, load a component version from a JSON file:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function">updateDocs</span><span class="token punctuation">(</span><span class="token parameter">docs</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>docs<span class="token punctuation">.</span>doclets<span class="token punctuation">.</span>version<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> versionFilePath <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>
path<span class="token punctuation">.</span><span class="token function">dirname</span><span class="token punctuation">(</span>file<span class="token punctuation">)</span><span class="token punctuation">,</span>
docs<span class="token punctuation">.</span>doclets<span class="token punctuation">.</span>version
<span class="token punctuation">)</span>
<span class="token keyword">const</span> version <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span>versionFilePath<span class="token punctuation">)</span><span class="token punctuation">.</span>version
docs<span class="token punctuation">.</span>doclets<span class="token punctuation">.</span>version <span class="token operator">=</span> version
docs<span class="token punctuation">.</span>tags<span class="token punctuation">.</span>version<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>description <span class="token operator">=</span> version
<span class="token punctuation">}</span>
<span class="token keyword">return</span> docs
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="updateexample"><a href="#updateexample" class="header-anchor">#</a> <code>updateExample</code></h2> <p>Type: <code>Function</code>, optional</p> <p>Function that modifies code example (Markdown fenced code block). For example you can use it to load examples from files:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function">updateExample</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> exampleFilePath</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> settings<span class="token punctuation">,</span> lang <span class="token punctuation">}</span> <span class="token operator">=</span> props
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> settings<span class="token punctuation">.</span>file <span class="token operator">===</span> <span class="token string">'string'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> filepath <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>exampleFilePath<span class="token punctuation">,</span> settings<span class="token punctuation">.</span>file<span class="token punctuation">)</span>
<span class="token keyword">delete</span> settings<span class="token punctuation">.</span>file
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token literal-property property">content</span><span class="token operator">:</span> fs<span class="token punctuation">.</span><span class="token function">readFileSync</span><span class="token punctuation">(</span>filepath<span class="token punctuation">)</span><span class="token punctuation">,</span>
settings<span class="token punctuation">,</span>
lang
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> props
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Use it like this in your Markdown files:</p> <div class="language-md extra-class"><pre class="language-md"><code><span class="token code"><span class="token punctuation">```</span><span class="token code-language">js { "file": "./some/file.js" }</span>
<span class="token punctuation">```</span></span>
</code></pre></div><p>You can also use this function to dynamically update some of your fenced code blocks that you do not want to be interpreted as Vue components by using the <a href="/docs/Documenting.html#usage-examples-and-readme-files">static modifier</a>.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function">updateExample</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> settings<span class="token punctuation">,</span> lang <span class="token punctuation">}</span> <span class="token operator">=</span> props
<span class="token keyword">if</span> <span class="token punctuation">(</span>lang <span class="token operator">===</span> <span class="token string">'javascript'</span> <span class="token operator">||</span> lang <span class="token operator">===</span> <span class="token string">'js'</span> <span class="token operator">||</span> lang <span class="token operator">===</span> <span class="token string">'jsx'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
settings<span class="token punctuation">.</span>static <span class="token operator">=</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> props
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="usagemode"><a href="#usagemode" class="header-anchor">#</a> <code>usageMode</code></h2> <p>Type: <code>'collapse' | 'hide' | 'expand'</code>, default: <code>collapse</code></p> <p>Defines the initial state of the props and methods tab:</p> <ul><li><code>collapse</code>: collapses the tab by default.</li> <li><code>hide</code>: hide the tab and it can´t be toggled in the UI.</li> <li><code>expand</code>: expand the tab by default.</li></ul> <h2 id="validextends"><a href="#validextends" class="header-anchor">#</a> <code>validExtends</code></h2> <p>Type: <code>Function</code>, default: <code>fileFullPath => !/[\\/]node_modules[\\/]/.test(fileFullPath)</code></p> <p>Function directly passed to <code>vue-docgen-api</code> to determine if a component that extends another should be parsed.</p> <p>The following lines will allow parsing extended components from node package <code>@my-library/components</code>.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function">validExtends</span><span class="token punctuation">(</span><span class="token parameter">fullFilePath</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[\\/]@my-library[\\/]components[\\/]</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>fullFilePath<span class="token punctuation">)</span> <span class="token operator">||</span>
<span class="token operator">!</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[\\/]node_modules[\\/]</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>fullFilePath<span class="token punctuation">)</span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>NOTE</strong> If <code>vue-docgen-api</code> fails to parse the targetted component, it will log a warning. It is not blocking but it is annoying.</p> <p><strong>NOTE</strong> If you allow all of <code>node_modules</code> to try to be parsed, you might hurt performance. Use it responsibly.</p> <h2 id="verbose"><a href="#verbose" class="header-anchor">#</a> <code>verbose</code></h2> <p>Type: <code>Boolean</code>, default: <code>false</code></p> <p>Print debug information. Same as <code>--verbose</code> command line switch.</p> <h2 id="version"><a href="#version" class="header-anchor">#</a> <code>version</code></h2> <p>Type: <code>String</code>, optional</p> <p>Style guide version, displayed under the title in the sidebar.</p> <h2 id="webpackconfig"><a href="#webpackconfig" class="header-anchor">#</a> <code>webpackConfig</code></h2> <p>Type: <code>Object</code> or <code>Function</code>, optional</p> <p>Custom webpack config options: loaders, extensions, plugins, etc. required for your project.</p> <p>Can be an object:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">webpackConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">resolve</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">extensions</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'.es6'</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.vue$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
<span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
<span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">'vue-loader'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js?$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
<span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
<span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">'babel-loader'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.scss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
<span class="token literal-property property">loaders</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token string">'style-loader'</span><span class="token punctuation">,</span>
<span class="token string">'css-loader'</span><span class="token punctuation">,</span>
<span class="token string">'sass-loader?precision=10'</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Or a function:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function">webpackConfig</span><span class="token punctuation">(</span><span class="token parameter">env</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>env <span class="token operator">===</span> <span class="token string">'development'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token comment">// custom options</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p><strong>Warning:</strong> This option disables config load from <code>webpack.config.js</code>, load your config <a href="/docs/Webpack.html#reusing-your-projects-webpack-config">manually</a>.</p></blockquote> <blockquote><p><strong>Note:</strong> <code>entry</code>, <code>externals</code>, <code>output</code>, <code>watch</code>, and <code>stats</code> options will be ignored. For production builds, <code>devtool</code> will also be ignored.</p></blockquote> <blockquote><p><strong>Note:</strong> <code>CommonsChunkPlugins</code>, <code>HtmlWebpackPlugin</code>, <code>UglifyJsPlugin</code>, <code>HotModuleReplacementPlugin</code> plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.</p></blockquote> <blockquote><p><strong>Note:</strong> Run style guide in verbose mode to see the actual webpack config used by vue-styleguidist: <code>npx vue-styleguidist server --verbose</code>.</p></blockquote> <p>See <a href="/docs/Webpack.html">Configuring webpack</a> for examples.</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/vue-styleguidist/vue-styleguidist/edit/dev/docs/Configuration.md" target="_blank" rel="noopener noreferrer">Edit this page</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.3c212ffd.js" defer></script><script src="/assets/js/3.4a2a9d93.js" defer></script><script src="/assets/js/8.38adfb93.js" defer></script>
</body>
</html>