update docs

vuejs · Jan 14, 2023 · 0a2a788 · 0a2a788
1 parent 3c958f8
commit 0a2a788
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 53 deletions.
diff --git a/docs/components/ModalDemo.vue b/docs/components/ModalDemo.vue
@@ -4,12 +4,10 @@ const showModal = ref(false)
 </script>
 
 <template>
-  <button class="modal-button" @click="showModal = true">
-    Show Modal
-  </button>
+  <button class="modal-button" @click="showModal = true">Show Modal</button>
 
-  <teleport to="body">
-    <transition name="modal">
+  <Teleport to="body">
+    <Transition name="modal">
       <div v-show="showModal" class="modal-mask">
         <div class="modal-container">
           <p>Hello from the modal!</p>
@@ -20,8 +18,8 @@ const showModal = ref(false)
           </div>
         </div>
       </div>
-    </transition>
-  </teleport>
+    </Transition>
+  </Teleport>
 </template>
 
 <style scoped>
@@ -72,6 +70,7 @@ const showModal = ref(false)
 .modal-leave-to {
   opacity: 0;
 }
+
 .modal-enter-from .modal-container,
 .modal-leave-to .modal-container {
   transform: scale(1.1);

diff --git a/docs/config/app-configs.md b/docs/config/app-configs.md
@@ -298,10 +298,47 @@ VitePress build hooks allow you to add new functionality and behaviors to your w
 - Sitemap
 - Search Indexing
 - PWA
+- Teleports
+
+### buildEnd
+
+- Type: `(siteConfig: SiteConfig) => Awaitable<void>`
+
+`buildEnd` is a build CLI hook, it will run after build (SSG) finish but before VitePress CLI process exits.
+
+```ts
+export default {
+  async buildEnd(siteConfig) {
+    // ...
+  }
+}
+```
+
+### postRender
+
+- Type: `(context: SSGContext) => Awaitable<SSGContext | void>`
+
+`postRender` is a build hook, called when SSG rendering is done. It will allow you to handle the teleports content during SSG.
+
+```ts
+export default {
+  async postRender(context) {
+    // ...
+  }
+}
+```
+
+```ts
+interface SSGContext {
+  content: string
+  teleports?: Record<string, string>
+  [key: string]: any
+}
+```
 
 ### transformHead
 
-- Type: `(ctx: TransformContext) => Awaitable<HeadConfig[]>`
+- Type: `(context: TransformContext) => Awaitable<HeadConfig[]>`
 
 `transformHead` is a build hook to transform the head before generating each page. It will allow you to add head entries that cannot be statically added to your VitePress config. You only need to return extra entries, they will be merged automatically with the existing ones.
 
@@ -311,7 +348,7 @@ Don't mutate anything inside the `ctx`.
 
 ```ts
 export default {
-  async transformHead(ctx) {
+  async transformHead(context) {
     // ...
   }
 }
@@ -367,38 +404,3 @@ export default {
   }
 }
 ```
-
-### rendered
-
-- Type: `(context: SSGContext) => Awaitable<SSGContext | void>`
-
-`rendered` is a build hook, called when SSG rendering is done. It will allow you to handling the teleports content during SSG.
-
-```ts
-export default {
-  async rendered(context) {
-  }
-}
-```
-
-```ts
-interface SSGContext {
-  content: string
-  teleports?: Record<string, string>
-  [key: string]: any
-}
-```
-
-### buildEnd
-
-- Type: `(siteConfig: SiteConfig) => Awaitable<void>`
-
-`buildEnd` is a build CLI hook, it will run after build (SSG) finish but before VitePress CLI process exits.
-
-```ts
-export default {
-  async buildEnd(siteConfig) {
-    // ...
-  }
-}
-```
diff --git a/docs/guide/using-vue.md b/docs/guide/using-vue.md
@@ -42,9 +42,9 @@ You can use the [`useData` helper](./api#usedata) in a `<script>` block and expo
 
 ```html
 <script setup>
-import { useData } from 'vitepress'
+  import { useData } from 'vitepress'
 
-const { page } = useData()
+  const { page } = useData()
 </script>
 
 <pre>{{ page }}</pre>
@@ -261,13 +261,9 @@ export default {
 
 - [Vue.js > Dynamic Components](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components)
 
-## Useing 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 [rendered](../config/app-configs#rendered).
-
-<script setup>
-import ModalDemo from '../components/ModalDemo.vue'
-</script>
+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](../config/app-configs#postrender).
 
 <ModalDemo />
 
@@ -279,8 +275,12 @@ import ModalDemo from '../components/ModalDemo.vue'
 <ClientOnly>
   <Teleport to="#modal">
     <div>
-      //...
+      // ...
     </div>
   </Teleport>
 </ClientOnly>
 ```
+
+<script setup>
+import ModalDemo from '../components/ModalDemo.vue'
+</script>