Update using-vue.md

pull/4060/head
Polaris 1 year ago committed by GitHub
parent 1109c0e70e
commit 878e45a7fb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -71,7 +71,7 @@ The count is: {{ count }}
When used in Markdown, `<style scoped>` requires adding special attributes to every element on the current page, which will significantly bloat the page size. `<style module>` is preferred when locally-scoped styling is needed in a page. When used in Markdown, `<style scoped>` requires adding special attributes to every element on the current page, which will significantly bloat the page size. `<style module>` is preferred when locally-scoped styling is needed in a page.
::: :::
You also have access to VitePress' runtime APIs such as the [`useData` helper](../reference/runtime-api#usedata), which provides access to current page's metadata: You also have access to VitePress' runtime APIs such as the [`useData` helper](../reference/runtime-api#usedata), which provides access to the current page's metadata:
**Input** **Input**
@ -122,7 +122,7 @@ This is a .md using a custom component
### Registering Components Globally ### Registering Components Globally
If a component is going to be used on most of the pages, they can be registered globally by customizing the Vue app instance. See relevant section in [Extending Default Theme](./extending-default-theme#registering-global-components) for an example. If a component is going to be used on several pages, it may be most useful to make it registered globally by customizing the Vue app instance. See the relevant section in [Extending Default Theme](./extending-default-theme#registering-global-components) for an example.
::: warning IMPORTANT ::: warning IMPORTANT
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 `<p>` tag, which will lead to hydration mismatch because `<p>` does not allow block elements to be placed inside it. 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 `<p>` tag, which will lead to hydration mismatch because `<p>` does not allow block elements to be placed inside it.
@ -196,7 +196,7 @@ Hello {{ 1 + 1 }}
Hello {{ 1 + 1 }} Hello {{ 1 + 1 }}
``` ```
Note that this might prevent certain tokens from being syntax highlighted properly. Note that this may prevent certain tokens from being syntax-highlighted properly.
## Using CSS Pre-processors ## Using CSS Pre-processors
@ -224,7 +224,7 @@ Then you can use the following in Markdown and theme components:
## Using Teleports ## Using Teleports
VitePress currently has SSG support for teleports to body only. For other targets, you can wrap them inside the built-in `<ClientOnly>` component or inject the teleport markup into the correct location in your final page HTML through [`postRender` hook](../reference/site-config#postrender). VitePress currently has SSG support for teleports to the page body only. For other targets, you can wrap them inside the built-in `<ClientOnly>` component or inject the teleport markup into the correct location in your final page HTML through [`postRender` hook](../reference/site-config#postrender).
<ModalDemo /> <ModalDemo />

Loading…
Cancel
Save