diff --git a/docs/guide/extending-default-theme.md b/docs/guide/extending-default-theme.md index 71aabec6a54d..5aa6fadbbcc1 100644 --- a/docs/guide/extending-default-theme.md +++ b/docs/guide/extending-default-theme.md @@ -98,6 +98,7 @@ export default { // .vitepress/theme/index.js import DefaultTheme from 'vitepress/theme' +/** @type {import('vitepress').Theme} */ export default { extends: DefaultTheme, enhanceApp(ctx) { @@ -107,6 +108,23 @@ export default { } ``` +If you're using TypeScript: +```ts +// .vitepress/theme/index.ts +import type { Theme } from 'vitepress' +import DefaultTheme from 'vitepress/theme' + +export default { + // ... + async enhanceApp({ app }) { + if (!import.meta.env.SSR) { + const plugin = await import('plugin-that-access-window-on-import') + app.use(plugin) + } + } +} satisfies Theme +``` + Since we are using Vite, you can also leverage Vite's [glob import feature](https://vitejs.dev/guide/features.html#glob-import) to auto register a directory of components. ## Layout Slots diff --git a/docs/guide/ssr-compat.md b/docs/guide/ssr-compat.md index 82eb58e5ab86..dfb0d7c7c73b 100644 --- a/docs/guide/ssr-compat.md +++ b/docs/guide/ssr-compat.md @@ -52,6 +52,7 @@ Since [`Theme.enhanceApp`](./custom-theme#theme-interface) can be async, you can ```js // .vitepress/theme/index.js +/** @type {import('vitepress').Theme} */ export default { // ... async enhanceApp({ app }) { @@ -63,6 +64,22 @@ export default { } ``` +If you're using TypeScript: +```ts +// .vitepress/theme/index.ts +import type { Theme } from 'vitepress' + +export default { + // ... + async enhanceApp({ app }) { + if (!import.meta.env.SSR) { + const plugin = await import('plugin-that-access-window-on-import') + app.use(plugin) + } + } +} satisfies Theme +``` + ### `defineClientComponent` VitePress provides a convenience helper for importing Vue components that access browser APIs on import.