From cf3f564635019f0f5322b0afc8d24126a48bf69c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxtjs.com>
Date: Thu, 23 Sep 2021 16:45:59 +0200
Subject: [PATCH] chore(docs): improvements regarding asyncData example

---
 docs/content/2.app/3.data-fetching.md | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/docs/content/2.app/3.data-fetching.md b/docs/content/2.app/3.data-fetching.md
index 695cb097df..9bc37a4206 100644
--- a/docs/content/2.app/3.data-fetching.md
+++ b/docs/content/2.app/3.data-fetching.md
@@ -13,7 +13,7 @@ asyncData(key: string, fn: () => Object, options?: { defer: boolean, server: boo
 ```
 
 * **key**: a unique key to ensure that data fetching can be properly de-duplicated across requests
-* **fn** an asynchronous function that must return an object.
+* **fn** an asynchronous function that **must return an object**.
 * **options**:
   - _defer_: whether to load the route before resolving the async function (defaults to `false`)
   - _server_: whether the fetch the data on server-side (defaults to `true`)
@@ -26,6 +26,18 @@ This helper only works with:
 
 ### Example
 
+```vue
+<script setup nuxt>
+const { data } = asyncData('time', () => $fetch('/api/count'))
+</script>
+
+<template>
+  Page visits: {{ data.count }}
+</template>
+```
+
+If you don't want to use the `<script setup>` syntax, you need to use the `defineNuxtComponent` method to define your component:
+
 ```vue
 <template>
   Page visits: {{ data.count }}
@@ -41,15 +53,4 @@ export default defineNuxtComponent({
 </script>
 ```
 
-When using with the `<script setup>` syntax, an addition attribute `nuxt` is required
-
-```vue
-<script setup nuxt>
-const { data } = asyncData('time', () => $fetch('/api/count'))
-</script>
-
-<template>
-  Page visits: {{ data.count }}
-</template>
-```