docs: add types for theme config (#3117)

* docs: add types for theme config

* chore: missing {}
pull/3118/head
Joaquín Sánchez 1 year ago committed by GitHub
parent 6cf1de5e9e
commit 71bed58936
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -98,6 +98,7 @@ export default {
// .vitepress/theme/index.js // .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme' import DefaultTheme from 'vitepress/theme'
/** @type {import('vitepress').Theme} */
export default { export default {
extends: DefaultTheme, extends: DefaultTheme,
enhanceApp(ctx) { 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. 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 ## Layout Slots

@ -52,6 +52,7 @@ Since [`Theme.enhanceApp`](./custom-theme#theme-interface) can be async, you can
```js ```js
// .vitepress/theme/index.js // .vitepress/theme/index.js
/** @type {import('vitepress').Theme} */
export default { export default {
// ... // ...
async enhanceApp({ app }) { 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` ### `defineClientComponent`
VitePress provides a convenience helper for importing Vue components that access browser APIs on import. VitePress provides a convenience helper for importing Vue components that access browser APIs on import.

Loading…
Cancel
Save