docs(api): document useError , useLazyAsyncData and useLazyFetch (#4341)

* docs: add documents for use-error,use-lazy-async-data and use-lazy-fetch

* docs(API): document useError,useLazyAsyncData and useLazyFetch

Co-authored-by: xiaojie.jiang <xiaojie.jiang@dhc.com.cn>

docs/content/3.api/1.composables/use-error.md

@@ -1,7 +1,14 @@
 # `useError`
 
+Nuxt provides a composable to catch global errors.
+
+This function will return the global Nuxt error that is being handled.
+
+```ts
+const error = useError()
+```
+
+`useError` set an error in state, create a reactive and SSR-friendly global Nuxt error across components.
+
 ::ReadMore{link="/guide/features/error-handling"}
 ::
-
-::NeedContribution
-::

docs/content/3.api/1.composables/use-lazy-async-data.md

@@ -1,10 +1,29 @@
 # `useLazyAsyncData`
 
-::ReadMore{link="/guide/features/data-fetching"}
+This composable behaves identically to [useAsyncData](/api/composables/use-async-data) with the `lazy: true` option set.  
-::
+
+Otherwise, this function does not block navigation. That means you will need to handle the situation where the data is `null` (or whatever value you have provided in a custom `default` factory function).
 
 ::ReadMore{link="/api/composables/use-async-data"}
 ::
 
-::NeedContribution
+## Example
+
+```vue
+<template>
+  <div>
+    {{ pending ? 'Loading' : count }}
+  </div>
+</template>
+
+<script setup>
+const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
+watch(count, (newCount) => {
+  // Because count starts out null, you won't have access
+  // to its contents immediately, but you can watch it.
+})
+</script>
+```
+
+::ReadMore{link="/guide/features/data-fetching"}
 ::

docs/content/3.api/1.composables/use-lazy-fetch.md

@@ -1,10 +1,35 @@
 # `useLazyFetch`
 
-::ReadMore{link="/guide/features/data-fetching"}
+This composable behaves identically to [useFetch](/api/composables/use-fetch) with the `lazy: true` option set.  
-::
+
+Otherwise, this function does not block navigation. That means you will need to handle the situation where the data is `null` (or whatever value you have provided in a custom `default` factory function).
 
 ::ReadMore{link="/api/composables/use-fetch"}
 ::
 
-::NeedContribution
+## Example
+
+```vue
+<template>
+  <!-- you'll need to handle a loading state -->
+  <div v-if="pending">
+    Loading ...
+  </div>
+  <div v-else>
+    <div v-for="post in posts">
+      <!-- do something -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { pending, data: posts } = useLazyFetch('/api/posts')
+watch(posts, (newPosts) => {
+  // Because posts starts out null, you won't have access
+  // to its contents immediately, but you can watch it.
+})
+</script>
+```
+
+::ReadMore{link="/guide/features/data-fetching"}
 ::

docs/content/3.api/3.utils/clear-error.md

@@ -18,7 +18,7 @@ clearError()
 clearError({ redirect: '/homepage' })
 ```
 
-Errors are set in state using [`useError()`](/api/composables/useError). The `clearError` composable will reset this state and calls the `app:error:cleared` hook with the provided options.
+Errors are set in state using [`useError()`](/api/composables/use-error). The `clearError` composable will reset this state and calls the `app:error:cleared` hook with the provided options.
 
 ::ReadMore{link="/guide/features/error-handling"}
 ::