From 5a9e4f3cb52cf2a42eaac2b76db293421bead88e Mon Sep 17 00:00:00 2001 From: wang5333 Date: Wed, 1 Jul 2026 12:50:10 +0800 Subject: [PATCH] docs: explain Vitest config for Vue components --- docs/en/guide/using-vue.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/docs/en/guide/using-vue.md b/docs/en/guide/using-vue.md index a9b9a389..a95e1264 100644 --- a/docs/en/guide/using-vue.md +++ b/docs/en/guide/using-vue.md @@ -132,6 +132,24 @@ If a component is going to be used on most of the pages, they can be registered Make sure a custom component's name either contains a hyphen or is in PascalCase. Otherwise, it will be treated as an inline element and wrapped inside a `

` tag, which will lead to hydration mismatch because `

` does not allow block elements to be placed inside it. ::: +### Testing Components + +The VitePress config is only used by VitePress. Test runners such as Vitest do not automatically read `.vitepress/config.ts`, so adding Vite plugins there does not configure your tests. VitePress already configures `@vitejs/plugin-vue` for docs builds, but component tests need their own Vitest/Vite config: + +```ts [vitest.config.ts] +import vue from '@vitejs/plugin-vue' +import { defineConfig } from 'vitest/config' + +export default defineConfig({ + plugins: [vue()], + test: { + environment: 'jsdom' + } +}) +``` + +If you are testing reusable Vue components, keep them outside the VitePress source directory (for example in `src/`) and use your `docs/` directory only for the VitePress site. This lets Vitest handle the project like a normal Vue app while VitePress builds the documentation. + ### Using Components In Headers You can use Vue components in the headers, but note the difference between the following syntaxes: