diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js index e86d2dca..e085cbbe 100644 --- a/docs/.vitepress/config.js +++ b/docs/.vitepress/config.js @@ -61,6 +61,7 @@ function getGuideSidebar() { children: [ { text: 'Frontmatter', link: '/guide/frontmatter' }, { text: 'Global Computed', link: '/guide/global-computed' }, + { text: 'Global Component', link: '/guide/global-component' }, { text: 'Customization', link: '/guide/customization' }, { text: 'Differences from Vuepress', diff --git a/docs/guide/differences-from-vuepress.md b/docs/guide/differences-from-vuepress.md index f3502537..94fdd4c0 100644 --- a/docs/guide/differences-from-vuepress.md +++ b/docs/guide/differences-from-vuepress.md @@ -110,8 +110,7 @@ In case you decide to move your project to VitePress, this is a list of differen - `path` - `regularPath` -## Default Components +## Global Components - Missing - - [``](https://vuepress.vuejs.org/guide/using-vue.html#browser-api-access-restrictions) - [``](https://vuepress.vuejs.org/guide/using-vue.html#badge) diff --git a/docs/guide/global-component.md b/docs/guide/global-component.md new file mode 100644 index 00000000..8ce0f7b5 --- /dev/null +++ b/docs/guide/global-component.md @@ -0,0 +1,28 @@ +# Global Component + +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. + +## Content + +The `Content` component displays the rendered markdown contents. Useful [when creating your own theme](http://localhost:3000/guide/customization.html). + +```vue + +``` + +## ClientOnly + +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. + +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. + +```html + + + +```