From 7e7e006e9baecebd4aef21881dd9233990cc68cb Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 10 May 2023 23:34:11 +0100
Subject: [PATCH] docs: add `await` before lazy composable examples

---
 docs/1.getting-started/6.data-fetching.md       | 8 ++++----
 docs/3.api/1.composables/use-lazy-async-data.md | 4 ++--
 docs/3.api/1.composables/use-lazy-fetch.md      | 4 ++--
 docs/3.api/3.utils/refresh-nuxt-data.md         | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/1.getting-started/6.data-fetching.md b/docs/1.getting-started/6.data-fetching.md
index 69f1da51f221..fd60511b36c2 100644
--- a/docs/1.getting-started/6.data-fetching.md
+++ b/docs/1.getting-started/6.data-fetching.md
@@ -58,9 +58,9 @@ This composable behaves identically to `useFetch` with the `lazy: true` option s
 </template>
 
 <script setup>
-const { pending, data: posts } = useLazyFetch('/api/posts')
+const { pending, data: posts } = await useLazyFetch('/api/posts')
 watch(posts, (newPosts) => {
-  // Because posts starts out null, you will not have access
+  // Because posts might start out null, you will not have access
   // to its contents immediately, but you can watch it.
 })
 </script>
@@ -119,7 +119,7 @@ This composable behaves identically to `useAsyncData` with the `lazy: true` opti
 </template>
 
 <script setup>
-const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
+const { pending, data: count } = await 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.
@@ -231,7 +231,7 @@ This method is useful if you want to refresh all the data fetching for a current
 </template>
 
 <script setup>
-const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
+const { pending, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
 
 const refresh = () => refreshNuxtData('count')
 </script>
diff --git a/docs/3.api/1.composables/use-lazy-async-data.md b/docs/3.api/1.composables/use-lazy-async-data.md
index 0180dbe7b08e..fc096e376b75 100644
--- a/docs/3.api/1.composables/use-lazy-async-data.md
+++ b/docs/3.api/1.composables/use-lazy-async-data.md
@@ -27,10 +27,10 @@ By default, [useAsyncData](/docs/api/composables/use-async-data) blocks navigati
 /* Navigation will occur before fetching is complete.
   Handle pending and error states directly within your component's template
 */
-const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
+const { pending, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
 
 watch(count, (newCount) => {
-  // Because count starts out null, you won't have access
+  // Because count might start out null, you won't have access
   // to its contents immediately, but you can watch it.
 })
 </script>
diff --git a/docs/3.api/1.composables/use-lazy-fetch.md b/docs/3.api/1.composables/use-lazy-fetch.md
index f910cf2746a3..953bdfb3d80c 100644
--- a/docs/3.api/1.composables/use-lazy-fetch.md
+++ b/docs/3.api/1.composables/use-lazy-fetch.md
@@ -32,9 +32,9 @@ By default, [useFetch](/docs/api/composables/use-fetch) blocks navigation until
 /* Navigation will occur before fetching is complete.
   Handle pending and error states directly within your component's template
 */
-const { pending, data: posts } = useLazyFetch('/api/posts')
+const { pending, data: posts } = await useLazyFetch('/api/posts')
 watch(posts, (newPosts) => {
-  // Because posts starts out null, you won't have access
+  // Because posts might start out null, you won't have access
   // to its contents immediately, but you can watch it.
 })
 </script>
diff --git a/docs/3.api/3.utils/refresh-nuxt-data.md b/docs/3.api/3.utils/refresh-nuxt-data.md
index dc3fa423c571..02eb5799d103 100644
--- a/docs/3.api/3.utils/refresh-nuxt-data.md
+++ b/docs/3.api/3.utils/refresh-nuxt-data.md
@@ -62,7 +62,7 @@ This example below refreshes only data where the key matches to `count`.
 </template>
 
 <script setup>
-const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
+const { pending, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
 const refresh = () => refreshNuxtData('count')
 </script>
 ```