0
# Vite Plugin
1

2
Vite plugin system providing all necessary transformations and integrations for Slidev functionality, including Markdown processing, Vue component handling, and asset optimization.
3

4
## Capabilities
5

6
### Main Vite Plugin Function
7

8
Creates a comprehensive array of Vite plugins that handle all aspects of Slidev presentation processing and development workflow.
9

10
```typescript { .api }
11
/**
12
 * Create complete Vite plugin configuration for Slidev
13
 * @param options - Resolved Slidev configuration options
14
 * @param pluginOptions - Optional plugin-specific configuration
15
 * @param serverOptions - Optional server-specific configuration
16
 * @returns Promise<PluginOption[]> - Array of configured Vite plugins
17
 */
18
function ViteSlidevPlugin(
19
  options: ResolvedSlidevOptions,
20
  pluginOptions?: SlidevPluginOptions,
21
  serverOptions?: SlidevServerOptions
22
): Promise<PluginOption[]>;
23

24
interface SlidevPluginOptions {
25
  /** Custom plugin configurations */
26
  [pluginName: string]: any;
27
}
28

29
interface SlidevServerOptions {
30
  /** Custom data loading function */
31
  loadData?: (loadedSource: Record<string, string>) => Promise<SlidevData | false>;
32
}
33
```
34

35
**Usage Examples:**
36

37
```typescript
38
import { ViteSlidevPlugin, resolveOptions } from "@slidev/cli";
39
import { createServer } from "vite";
40

41
// Basic plugin setup
42
const options = await resolveOptions({ entry: "slides.md" }, "dev");
43
const plugins = await ViteSlidevPlugin(options);
44

45
const viteServer = await createServer({
46
  plugins,
47
  server: { port: 3000 }
48
});
49

50
// Plugin with custom options
51
const pluginsWithOptions = await ViteSlidevPlugin(options, {
52
  // Plugin-specific options
53
  markdown: { 
54
    customRenderer: true 
55
  },
56
  vue: { 
57
    customBlocks: ['slide'] 
58
  }
59
});
60

61
// Plugin with server options
62
const pluginsWithServer = await ViteSlidevPlugin(options, {}, {
63
  loadData: async (loadedSource) => {
64
    console.log("Loaded files:", Object.keys(loadedSource));
65
    // Custom processing...
66
    return parsedData;
67
  }
68
});
69
```
70

71
### Individual Plugin Components
72

73
The main plugin function orchestrates multiple specialized plugins for different aspects of Slidev functionality.
74

75
```typescript { .api }
76
// Plugin component functions (internal)
77
interface PluginComponents {
78
  /** Slide loading and processing */
79
  createSlidesLoader(
80
    options: ResolvedSlidevOptions,
81
    serverOptions?: SlidevServerOptions
82
  ): Promise<PluginOption>;
83
  
84
  /** Markdown processing and transformation */
85
  createMarkdownPlugin(
86
    options: ResolvedSlidevOptions,
87
    pluginOptions?: SlidevPluginOptions
88
  ): Promise<PluginOption>;
89
  
90
  /** Layout wrapper injection */
91
  createLayoutWrapperPlugin(
92
    options: ResolvedSlidevOptions
93
  ): Promise<PluginOption>;
94
  
95
  /** Context injection for slides */
96
  createContextInjectionPlugin(): Promise<PluginOption>;
97
  
98
  /** Vue.js integration */
99
  createVuePlugin(
100
    options: ResolvedSlidevOptions,
101
    pluginOptions?: SlidevPluginOptions
102
  ): Promise<PluginOption>;
103
  
104
  /** HMR patch for development */
105
  createHmrPatchPlugin(): Promise<PluginOption>;
106
  
107
  /** Component auto-registration */
108
  createComponentsPlugin(
109
    options: ResolvedSlidevOptions,
110
    pluginOptions?: SlidevPluginOptions
111
  ): Promise<PluginOption>;
112
  
113
  /** Icon processing */
114
  createIconsPlugin(
115
    options: ResolvedSlidevOptions,
116
    pluginOptions?: SlidevPluginOptions
117
  ): Promise<PluginOption>;
118
  
119
  /** Remote asset handling */
120
  createRemoteAssetsPlugin(
121
    options: ResolvedSlidevOptions,
122
    pluginOptions?: SlidevPluginOptions
123
  ): Promise<PluginOption>;
124
  
125
  /** Server reference injection */
126
  createServerRefPlugin(
127
    options: ResolvedSlidevOptions,
128
    pluginOptions?: SlidevPluginOptions
129
  ): Promise<PluginOption>;
130
  
131
  /** Configuration extension */
132
  createConfigPlugin(
133
    options: ResolvedSlidevOptions
134
  ): Promise<PluginOption>;
135
  
136
  /** Monaco editor types */
137
  createMonacoTypesLoader(
138
    options: ResolvedSlidevOptions
139
  ): Promise<PluginOption>;
140
  
141
  /** Monaco editor writer */
142
  createMonacoWriterPlugin(
143
    options: ResolvedSlidevOptions
144
  ): Promise<PluginOption>;
145
  
146
  /** Vue compiler flags */
147
  createVueCompilerFlagsPlugin(
148
    options: ResolvedSlidevOptions
149
  ): Promise<PluginOption>;
150
  
151
  /** UnoCSS integration */
152
  createUnocssPlugin(
153
    options: ResolvedSlidevOptions,
154
    pluginOptions?: SlidevPluginOptions
155
  ): Promise<PluginOption>;
156
  
157
  /** Static file copying */
158
  createStaticCopyPlugin(
159
    options: ResolvedSlidevOptions,
160
    pluginOptions?: SlidevPluginOptions
161
  ): Promise<PluginOption>;
162
  
163
  /** Development inspection */
164
  createInspectPlugin(
165
    options: ResolvedSlidevOptions,
166
    pluginOptions?: SlidevPluginOptions
167
  ): Promise<PluginOption>;
168
  
169
  /** User-defined plugins */
170
  createUserVitePlugins(
171
    options: ResolvedSlidevOptions
172
  ): Promise<PluginOption>;
173
}
174
```
175

176
### Slides Loader Plugin
177

178
Core plugin responsible for loading and processing slide content with hot module reloading support.
179

180
```typescript { .api }
181
// Slides loader functionality
182
interface SlidesLoaderPlugin {
183
  /** Virtual module handling */
184
  virtualModules: {
185
    "/@slidev/slides": "slide-data-module";
186
    "/@slidev/config": "config-data-module"; 
187
    "/@slidev/context": "context-data-module";
188
  };
189
  
190
  /** File watching */
191
  fileWatching: {
192
    markdownFiles: string[];        // *.md files
193
    configFiles: string[];          // slidev.config.*, frontmatter
194
    setupFiles: string[];           // setup/ directory
195
    componentFiles: string[];       // components/ directory
196
  };
197
  
198
  /** Hot reloading */
199
  hotReloading: {
200
    slideUpdates: "granular-updates";     // Individual slide changes
201
    configUpdates: "full-reload";         // Configuration changes
202
    themeUpdates: "server-restart";       // Theme changes
203
    addFiles: "incremental-addition";     // New file detection
204
  };
205
  
206
  /** Data processing */
207
  dataProcessing: {
208
    markdownParsing: "frontmatter-aware";
209
    slideExtraction: "delimiter-based";
210
    metadataResolution: "merged-configs";
211
    assetDiscovery: "automatic";
212
  };
213
}
214
```
215

216
### Markdown Processing Plugin
217

218
Plugin for transforming Markdown content into Vue components with Slidev-specific features.
219

220
```typescript { .api }
221
// Markdown processing capabilities
222
interface MarkdownPlugin {
223
  /** Markdown parsing */
224
  parsing: {
225
    frontmatterExtraction: "yaml-parsing";
226
    slideDelimitation: "--- separator";
227
    codeBlockProcessing: "shiki-highlighting";
228
    mathProcessing: "katex-rendering";
229
  };
230
  
231
  /** Vue component generation */
232
  componentGeneration: {
233
    slideComponents: "vue-sfc-generation";
234
    layoutWrapping: "automatic-layout-selection";
235
    clickAnimations: "v-click-directive";
236
    transitionEffects: "slide-transitions";
237
  };
238
  
239
  /** Asset handling */
240
  assetHandling: {
241
    imageOptimization: "automatic-processing";
242
    remoteAssets: "caching-and-optimization";
243
    assetImports: "es-module-imports";
244
  };
245
  
246
  /** Extension support */
247
  extensionSupport: {
248
    mermaidDiagrams: "svg-generation";
249
    plantUmlDiagrams: "image-generation";
250
    mathEquations: "katex-rendering";
251
    codeHighlighting: "shiki-processing";
252
  };
253
}
254
```
255

256
### Vue Integration Plugin
257

258
Plugin for Vue.js framework integration with Slidev-specific enhancements.
259

260
```typescript { .api }
261
// Vue integration features
262
interface VueIntegrationPlugin {
263
  /** Component processing */
264
  componentProcessing: {
265
    singleFileComponents: "full-sfc-support";
266
    globalComponents: "auto-registration";
267
    layoutComponents: "theme-provided-layouts";
268
    slideComponents: "generated-from-markdown";
269
  };
270
  
271
  /** Directive support */
272
  directiveSupport: {
273
    vClick: "click-animation-directive";
274
    vMotion: "motion-animation-directive";
275
    vShow: "visibility-control-directive";
276
    vIf: "conditional-rendering-directive";
277
  };
278
  
279
  /** Composition API enhancements */
280
  compositionApi: {
281
    useSlideContext: "slide-specific-context";
282
    useNav: "navigation-utilities";
283
    useStorage: "persistent-storage";
284
    useClicks: "click-tracking";
285
  };
286
  
287
  /** Template features */
288
  templateFeatures: {
289
    slotSupport: "layout-slot-system";
290
    scopedSlots: "data-passing-support";
291
    dynamicComponents: "component-switching";
292
    asyncComponents: "lazy-loading";
293
  };
294
}
295
```
296

297
### UnoCSS Integration Plugin
298

299
Plugin for UnoCSS utility-first CSS framework integration with Slidev theming.
300

301
```typescript { .api }
302
// UnoCSS integration capabilities
303
interface UnocssPlugin {
304
  /** CSS generation */
305
  cssGeneration: {
306
    utilityClasses: "on-demand-generation";
307
    customClasses: "user-defined-utilities";
308
    themeClasses: "theme-provided-utilities";
309
    componentClasses: "component-specific-styles";
310
  };
311
  
312
  /** Configuration merging */
313
  configMerging: {
314
    userConfig: "uno.config.ts";
315
    themeConfig: "theme-provided-config";
316
    addonConfigs: "addon-provided-configs";
317
    builtinConfig: "slidev-defaults";
318
  };
319
  
320
  /** Development features */
321
  developmentFeatures: {
322
    hotReloading: "instant-css-updates";
323
    inspector: "css-class-inspection";
324
    debugging: "generated-css-viewing";
325
  };
326
  
327
  /** Optimization */
328
  optimization: {
329
    treeshaking: "unused-css-removal";
330
    minification: "production-css-minification";
331
    purging: "unused-utility-removal";
332
  };
333
}
334
```
335

336
### Asset Processing Plugins
337

338
Plugins for handling various types of assets used in presentations.
339

340
```typescript { .api }
341
// Asset processing capabilities
342
interface AssetProcessingPlugins {
343
  /** Icon processing */
344
  iconProcessing: {
345
    iconSets: "iconify-integration";
346
    customIcons: "svg-optimization";
347
    iconComponents: "vue-component-generation";
348
    treeshaking: "unused-icon-removal";
349
  };
350
  
351
  /** Image processing */
352
  imageProcessing: {
353
    optimization: "imagemin-integration";
354
    responsiveImages: "srcset-generation";
355
    lazyLoading: "intersection-observer";
356
    formats: "webp-avif-support";
357
  };
358
  
359
  /** Font processing */
360
  fontProcessing: {
361
    webfonts: "google-fonts-optimization";
362
    localFonts: "font-file-optimization";
363
    subsetting: "character-subset-generation";
364
    preloading: "font-preload-hints";
365
  };
366
  
367
  /** Static assets */
368
  staticAssets: {
369
    copying: "public-directory-copying";
370
    processing: "asset-pipeline-processing";
371
    optimization: "compression-and-caching";
372
    urls: "asset-url-resolution";
373
  };
374
}
375
```
376

377
### Development Tools Plugins
378

379
Plugins providing development-time tools and debugging capabilities.
380

381
```typescript { .api }
382
// Development tools capabilities
383
interface DevelopmentToolsPlugins {
384
  /** HMR enhancements */
385
  hmrEnhancements: {
386
    slideReloading: "granular-slide-updates";
387
    configReloading: "configuration-hot-reloading";
388
    componentReloading: "vue-component-hmr";
389
    styleReloading: "css-hot-reloading";
390
  };
391
  
392
  /** Inspection tools */
393
  inspectionTools: {
394
    viteInspector: "vite-plugin-inspect";
395
    bundleAnalyzer: "bundle-composition-analysis";
396
    performanceMonitor: "build-performance-metrics";
397
    dependencyAnalyzer: "dependency-graph-visualization";
398
  };
399
  
400
  /** Error handling */
401
  errorHandling: {
402
    enhancedErrors: "detailed-error-messages";
403
    stackTraces: "source-mapped-stack-traces";
404
    suggestions: "fix-suggestions";
405
    recovery: "error-recovery-mechanisms";
406
  };
407
  
408
  /** Debugging utilities */
409
  debuggingUtilities: {
410
    sourceMapping: "accurate-source-maps";
411
    breakpointSupport: "debugger-integration";
412
    console: "enhanced-console-logging";
413
    profiling: "performance-profiling";
414
  };
415
}
416
```
417

418
### Production Optimization Plugins
419

420
Plugins that optimize builds for production deployment.
421

422
```typescript { .api }
423
// Production optimization capabilities
424
interface ProductionOptimizationPlugins {
425
  /** Bundle optimization */
426
  bundleOptimization: {
427
    codeSplitting: "route-based-splitting";
428
    treeshaking: "dead-code-elimination";
429
    minification: "terser-minification";
430
    compression: "gzip-brotli-compression";
431
  };
432
  
433
  /** Asset optimization */
434
  assetOptimization: {
435
    imageCompression: "lossy-lossless-compression";
436
    fontSubsetting: "character-subset-optimization";
437
    cssMinification: "cssnano-optimization";
438
    htmlMinification: "html-minifier-optimization";
439
  };
440
  
441
  /** Caching strategies */
442
  cachingStrategies: {
443
    contentHashing: "cache-busting-hashes";
444
    serviceWorker: "offline-caching-support";
445
    cdnOptimization: "cdn-friendly-assets";
446
    preloading: "resource-preloading-hints";
447
  };
448
  
449
  /** Performance monitoring */
450
  performanceMonitoring: {
451
    bundleAnalysis: "bundle-size-analysis";
452
    loadingMetrics: "loading-performance-metrics";
453
    runtimeMetrics: "runtime-performance-tracking";
454
    lighthouseIntegration: "lighthouse-ci-integration";
455
  };
456
}
457
```
458

459
### Plugin Configuration Options
460

461
Configuration options for customizing plugin behavior across different modes.
462

463
```typescript { .api }
464
// Plugin configuration interface
465
interface PluginConfiguration {
466
  /** Mode-specific settings */
467
  modeSettings: {
468
    development: {
469
      hotReloading: boolean;
470
      sourceMapping: boolean;
471
      errorOverlay: boolean;
472
      inspection: boolean;
473
    };
474
    
475
    production: {
476
      minification: boolean;
477
      treeshaking: boolean;
478
      compression: boolean;
479
      optimization: boolean;
480
    };
481
    
482
    export: {
483
      assetInlining: boolean;
484
      pathResolution: boolean;
485
      staticGeneration: boolean;
486
    };
487
  };
488
  
489
  /** Feature toggles */
490
  featureToggles: {
491
    monaco: boolean;              // Monaco editor support
492
    drawings: boolean;            // Drawing tools
493
    recording: boolean;           // Recording capabilities
494
    presenter: boolean;           // Presenter mode
495
    print: boolean;               // Print/export support
496
  };
497
  
498
  /** Performance settings */
499
  performanceSettings: {
500
    chunkSizeLimit: number;       // Bundle size warnings
501
    assetSizeLimit: number;       // Asset size warnings
502
    parallelProcessing: boolean;  // Parallel plugin execution
503
    caching: boolean;             // Plugin result caching
504
  };
505
}
506
```
507

508
**Usage Examples:**
509

510
```typescript
511
import { ViteSlidevPlugin, resolveOptions } from "@slidev/cli";
512

513
// Plugin with custom configuration
514
const options = await resolveOptions({ entry: "slides.md" }, "dev");
515
const plugins = await ViteSlidevPlugin(options, {
516
  // Disable Monaco editor for faster builds
517
  monaco: { enabled: false },
518
  
519
  // Custom UnoCSS configuration
520
  unocss: { 
521
    shortcuts: {
522
      'slide-title': 'text-4xl font-bold text-center mb-8'
523
    }
524
  },
525
  
526
  // Enhanced Vue integration
527
  vue: {
528
    customBlocks: ['slide', 'layout'],
529
    reactivityTransform: true
530
  }
531
});
532

533
// Use plugins in Vite configuration
534
export default {
535
  plugins,
536
  // ... other Vite options
537
};
538
```
539

540
## Integration with Vite Ecosystem
541

542
The Slidev Vite plugin integrates seamlessly with the broader Vite ecosystem:
543

544
- **Vite Dev Server**: Full HMR support with Slidev-specific enhancements
545
- **Vite Build**: Production optimizations tailored for presentation sites
546
- **Vite Plugin API**: Compatible with standard Vite plugin conventions
547
- **Framework Integration**: Works with Vue.js and other Vite-supported frameworks
548

549
The plugin system ensures that Slidev presentations benefit from Vite's fast development experience while adding presentation-specific functionality and optimizations.