Vite
Vite bundler is provided by @vuepress/bundler-vite package. It is a dependency of the vuepress 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
Details:
Accepts all options of Vite.
Also see:
vuePluginOptions
Details:
Accepts all options of @vitejs/plugin-vue.
Also see:
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 Guide would be helpful.