VitePress comes with few built-in component that can be used globally. You may use these components in your markdown or your custom theme configuration.
VitePress comes with few built-in components that can be used globally. You may use these components in your markdown or your custom theme configuration.
## Content
## Content
@ -17,9 +17,9 @@ The `Content` component displays the rendered markdown contents. Useful [when cr
The `ClientOnly` component renderes its slot only at client side.
The `ClientOnly` component renderes its slot only at client side.
Because VitePress applications are server-rendered in Node.js when generating static builds, any Vue usage must conform to the universal code requirements. In short, make sure to only access Browser / DOM APIs in beforeMount or mounted hooks.
Because VitePress applications are server-rendered in Node.js when generating static builds, any Vue usage must conform to the universal code requirements. In short, make sure to only access Browser / DOM APIs in `beforeMount` or `mounted` hooks.
If you are using or demoing components that are not SSR-friendly (for example, contain custom directives), you can wrap them inside the `ClientOnly` component.
If you are using or demoing components that are not SSR-friendly (for example, components that contain [custom directives](https://vuejs.org/guide/reusability/custom-directives.html) that don't implement an [SSR transform](https://github.com/vuejs/core/issues/3298#issuecomment-785607554)), you can wrap them inside the `ClientOnly` component.
```html
```html
<ClientOnly>
<ClientOnly>
@ -29,4 +29,4 @@ If you are using or demoing components that are not SSR-friendly (for example, c
## OutboundLink
## OutboundLink
The indicator `OutboundLink` is used to denote external links. In VitePress, this component has been followed by every external link.
The component `OutboundLink` is used to denote external links on the page. In VitePress, this component "follows" every external link. `OutboundLink` is a small component that simply renders an SVG icon after an external link.