| 1 | # Configure Vite and Plugins |
| 2 | |
| 3 | <Environment type="node" /> |
| 4 | |
| 5 | Slidev is powered by [Vite](https://vitejs.dev/) under the hood. This means you can leverage Vite's great plugin system to customize your slides even further. |
| 6 | |
| 7 | The `vite.config.ts` will be respected if you have one, and will be merged with the Vite config provided by Slidev, your theme and the addons. |
| 8 | |
| 9 | ## Configure Internal Plugins |
| 10 | |
| 11 | Slidev internally adds the following plugins to Vite: |
| 12 | |
| 13 | - [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue) |
| 14 | - [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) |
| 15 | - [unplugin-icons](https://github.com/unplugin/unplugin-icons) |
| 16 | - [vite-plugin-vue-markdown](https://github.com/unplugin/unplugin-vue-markdown) |
| 17 | - [vite-plugin-remote-assets](https://github.com/antfu/vite-plugin-remote-assets) |
| 18 | - [unocss/vite](https://github.com/unocss/unocss/tree/main/packages/vite) |
| 19 | |
| 20 | To configure the built-in plugins listed above, create a `vite.config.ts` with the following content. Please note that Slidev has some [default configurations](https://github.com/slidevjs/slidev/blob/main/packages/slidev/node/vite/index.ts) for those plugins, this usage will override some of them, which may potentially cause the app to break. Please treat this as **an advanced feature**, and make sure you know what you are doing before moving on. |
| 21 | |
| 22 | ```ts twoslash [vite.config.ts] |
| 23 | /* eslint-disable import/first */ |
| 24 | /// <reference types="@slidev/types" /> |
| 25 | import type MarkdownExit from 'markdown-exit' |
| 26 | |
| 27 | declare const MyPlugin: (md: any) => void |
| 28 | // ---cut--- |
| 29 | import { defineConfig } from 'vite' |
| 30 | |
| 31 | export default defineConfig({ |
| 32 | slidev: { |
| 33 | vue: { |
| 34 | /* vue options */ |
| 35 | }, |
| 36 | markdown: { |
| 37 | /* markdown-exit options */ |
| 38 | markdownSetup(md) { |
| 39 | /* custom markdown-exit plugins */ |
| 40 | md.use(MyPlugin) |
| 41 | }, |
| 42 | }, |
| 43 | /* options for other plugins */ |
| 44 | }, |
| 45 | }) |
| 46 | ``` |
| 47 | |
| 48 | See the [type declarations](https://github.com/slidevjs/slidev/blob/main/packages/types/src/vite.ts#L11) for more options. |
| 49 | |
| 50 | ::: warning |
| 51 | It is not allowed to re-add plugins that has been used internally be Slidev. For example, instead of |
| 52 | |
| 53 | ```ts twoslash |
| 54 | import Vue from '@vitejs/plugin-vue' |
| 55 | import { defineConfig } from 'vite' |
| 56 | |
| 57 | export default defineConfig({ |
| 58 | plugins: [ |
| 59 | Vue({ |
| 60 | /* vue options */ |
| 61 | }) |
| 62 | ], |
| 63 | }) |
| 64 | ``` |
| 65 | |
| 66 | Please pass the Vue options to the `slidev.vue` field as described above |
| 67 | ::: |
| 68 | |
| 69 | ## Add Custom Plugins based on Slide data |
| 70 | |
| 71 | Usually you can add Vite plugins into your `vite.config.ts` (see above). |
| 72 | However, if you want to add plugins based on the slide data, you need to add a `./setup/vite-plugins.ts` with the following content: |
| 73 | |
| 74 | ```ts twoslash |
| 75 | import { defineVitePluginsSetup } from '@slidev/types' |
| 76 | |
| 77 | export default defineVitePluginsSetup((options) => { |
| 78 | return [ |
| 79 | // Your plugins here |
| 80 | // Slide data is available as options.data.slides |
| 81 | ] |
| 82 | }) |
| 83 | ``` |
| 84 |