VuePress

Vite

@vuepress/bundler-vite

Vite bundler is provided by @vuepress/bundler-viteopen in new window package. It is a dependency of the vuepressopen in new window package, and you can also install it separately.

npm i -D @vuepress/bundler-vite@next

Options

Reference of vite bundler options:

const { viteBundler } = require('@vuepress/bundler-vite')

module.exports = {
  bundler: viteBundler({
    viteOptions: {},
    vuePluginOptions: {},
  }),
}

import { viteBundler } from '@vuepress/bundler-vite'
import { defineUserConfig } from '@vuepress/cli'

export default defineUserConfig({
  bundler: viteBundler({
    viteOptions: {},
    vuePluginOptions: {},
  }),
})

viteOptions

vuePluginOptions

FAQ

SSR Externals Issue

When you are importing a third-party library (called foo-lib), a common error your might meet in build is:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /path/to/foo-lib

To get grid of it, you need to set ssr.noExternal option:

export default defineUserConfig({
  bundler: viteBundler({
    viteOptions: {
      // @ts-expect-error: vite does not provide types for ssr options yet
      ssr: {
        noExternal: ['foo-lib'],
      },
    },
  }),
})

VuePress is using Vite server-side rendering (SSR) to pre-render markdown to HTML files. Although it's quite usable and work well with VuePress, it's still marked as experimental and might have some issues. To fully understand what the above error is, reading Vite SSR Externals Guideopen in new window would be helpful.