From 0087e7bbe077804cdda6eaa5d438f5883a864151 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 29 Aug 2022 11:02:24 +0100
Subject: [PATCH] docs: add information on how to use options api asyncData
 (#7019)

---
 .../2.guide/2.features/5.data-fetching.md     | 21 +++++++++++++++++++
 test/basic.test.ts                            |  8 +++++++
 .../basic/pages/legacy/async-data.vue         | 15 +++++++++++++
 3 files changed, 44 insertions(+)
 create mode 100644 test/fixtures/basic/pages/legacy/async-data.vue

diff --git a/docs/content/2.guide/2.features/5.data-fetching.md b/docs/content/2.guide/2.features/5.data-fetching.md
index cb83cc4d45..123f3d9ef2 100644
--- a/docs/content/2.guide/2.features/5.data-fetching.md
+++ b/docs/content/2.guide/2.features/5.data-fetching.md
@@ -173,6 +173,27 @@ const refresh = () => refreshNuxtData('count')
 </script>
 ```
 
+## Options API support
+
+Nuxt 3 provides a way to perform `asyncData` fetching within the Options API. You must wrap your component definition within `defineNuxtComponent` for this to work.
+
+```vue
+<script>
+export default defineNuxtComponent({
+  fetchKey: 'hello',
+  async asyncData () {
+    return {
+      hello: await $fetch('/api/hello')
+    }
+  }
+})
+</script>
+```
+
+::alert{type=warning}
+Options API support for `asyncData` may well change before the stable release of Nuxt 3.
+::
+
 ## Isomorphic `fetch` and `$fetch`
 
 When we call `fetch` in the browser, user headers like `cookie` will be directly sent to the API. But during server-side-rendering, since the `fetch` request takes place 'internally' within the server, it doesn't include the user's browser cookies, nor does it pass on cookies from the fetch response.
diff --git a/test/basic.test.ts b/test/basic.test.ts
index b3709b9359..f9574c562d 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -171,6 +171,14 @@ describe('head tags', () => {
   // })
 })
 
+describe('legacy async data', () => {
+  it('should work with defineNuxtComponent', async () => {
+    const html = await $fetch('/legacy/async-data')
+    expect(html).toContain('<div>Hello API</div>')
+    expect(html).toContain('{hello:"Hello API"}')
+  })
+})
+
 describe('navigate', () => {
   it('should redirect to index with navigateTo', async () => {
     const { headers } = await fetch('/navigate-to/', { redirect: 'manual' })
diff --git a/test/fixtures/basic/pages/legacy/async-data.vue b/test/fixtures/basic/pages/legacy/async-data.vue
new file mode 100644
index 0000000000..3ca56e0798
--- /dev/null
+++ b/test/fixtures/basic/pages/legacy/async-data.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    {{ hello }}
+  </div>
+</template>
+
+<script>
+export default defineNuxtComponent({
+  async asyncData () {
+    return {
+      hello: await $fetch('/api/hello')
+    }
+  }
+})
+</script>