Configure Vite and Plugins

Environment: node

This setup function will only run on Node.js environment, you can have access to Node's API.

Slidev is powered by Vite under the hood. This means you can leverage Vite's great plugin system to customize your slides even further.

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.

Configure Internal Plugins

Slidev internally adds the following plugins to Vite:

• @vitejs/plugin-vue
• unplugin-vue-components
• unplugin-icons
• vite-plugin-vue-markdown
• vite-plugin-remote-assets
• unocss/vite

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 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.

import { defineConfig } from 'vite'

export default defineConfig({
  slidev: {
    vue: {
      /* vue options */
    },
    markdown: {
      /* markdown-it options */
      markdownItSetup(md) {
        /* custom markdown-it plugins */
        md.use(MyPlugin)
      },
    },
    /* options for other plugins */
  },
})

See the type declarations for more options.

WARNING

It is not allowed to re-add plugins that has been used internally be Slidev. For example, instead of

import Vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    Vue({
      /* vue options */
    })
  ],
})

Please pass the Vue options to the slidev.vue field as described above