From 806a9305e1483c2b0eccd111c08e1c923cf4ab97 Mon Sep 17 00:00:00 2001
From: Krutie Patel <krutie.patel@gmail.com>
Date: Sat, 17 Sep 2022 18:18:56 +1000
Subject: [PATCH 1/9] docs(api): add defineNuxtComponent utils

---
 .../3.api/3.utils/define-nuxt-component.md    | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/docs/content/3.api/3.utils/define-nuxt-component.md b/docs/content/3.api/3.utils/define-nuxt-component.md
index 1a718a0a6cf..8332393b5e0 100644
--- a/docs/content/3.api/3.utils/define-nuxt-component.md
+++ b/docs/content/3.api/3.utils/define-nuxt-component.md
@@ -1,4 +1,24 @@
 # `defineNuxtComponent`
 
-::NeedContribution
-::
+`defineNuxtComponent()` is a helper function for defining type safe Vue components within a Nuxt application. `defineNuxtComponent()` is a wrapper around [defineComponent()](https://vuejs.org/api/general.html#definecomponent) function that supports inferring the props passed to `setup()` function when we use Composition API without `<script setup>`.
+
+`defineNuxtComponent()` also takes care of resolving the promise returned by `useAsyncData()` in Vue components found at `components/` and `pages/` directory or in the `~/app.vue` component found at the root of your Nuxt application.
+
+Any Vue 3 components written in Nuxt application without `<script setup lang=“ts”>` can use `defineNuxtComponent()` helper function to leverage the benefits of TypeScript.
+
+## Example
+
+```vue [pages/index.vue]
+  <script lang="ts">
+    import { defineComponent } from 'vue'
+    export default defineNuxtComponent({
+      async setup(props) {
+        const { data } = await useAsyncData('count', () => Promise.resolve({data: { name: 'Hello world!'}}))
+  
+        return {
+            data
+        }
+      }
+    })
+  </script>
+```

From c3b1eee6b5915dcc11d2a634b85a6b1c587331bc Mon Sep 17 00:00:00 2001
From: Krutie Patel <krutie.patel@gmail.com>
Date: Sat, 17 Sep 2022 19:14:33 +1000
Subject: [PATCH 2/9] Update
 docs/content/3.api/3.utils/define-nuxt-component.md

Co-authored-by: Daniel Roe <daniel@roe.dev>
---
 docs/content/3.api/3.utils/define-nuxt-component.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/content/3.api/3.utils/define-nuxt-component.md b/docs/content/3.api/3.utils/define-nuxt-component.md
index 8332393b5e0..c8fcc3b818d 100644
--- a/docs/content/3.api/3.utils/define-nuxt-component.md
+++ b/docs/content/3.api/3.utils/define-nuxt-component.md
@@ -10,7 +10,6 @@ Any Vue 3 components written in Nuxt application without `<script setup lang=“
 
 ```vue [pages/index.vue]
   <script lang="ts">
-    import { defineComponent } from 'vue'
     export default defineNuxtComponent({
       async setup(props) {
         const { data } = await useAsyncData('count', () => Promise.resolve({data: { name: 'Hello world!'}}))

From afec88e2e5eef8be84990280eea4dd4f56e54125 Mon Sep 17 00:00:00 2001
From: Krutie Patel <krutie.patel@gmail.com>
Date: Sat, 17 Sep 2022 19:14:48 +1000
Subject: [PATCH 3/9] Update
 docs/content/3.api/3.utils/define-nuxt-component.md

Co-authored-by: Daniel Roe <daniel@roe.dev>
---
 docs/content/3.api/3.utils/define-nuxt-component.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/3.api/3.utils/define-nuxt-component.md b/docs/content/3.api/3.utils/define-nuxt-component.md
index c8fcc3b818d..5e41fd6fadf 100644
--- a/docs/content/3.api/3.utils/define-nuxt-component.md
+++ b/docs/content/3.api/3.utils/define-nuxt-component.md
@@ -12,7 +12,7 @@ Any Vue 3 components written in Nuxt application without `<script setup lang=“
   <script lang="ts">
     export default defineNuxtComponent({
       async setup(props) {
-        const { data } = await useAsyncData('count', () => Promise.resolve({data: { name: 'Hello world!'}}))
+        const { data } = await useAsyncData(() => Promise.resolve('Hello world!'))
   
         return {
             data

From 3b8baa8e7fe6caebca77197d9e4c03c4201e5e2d Mon Sep 17 00:00:00 2001
From: Krutie Patel <krutie.patel@gmail.com>
Date: Sat, 17 Sep 2022 23:54:47 +1000
Subject: [PATCH 4/9] docs(api): defineNuxtCompont - address PR comment

---
 .../3.api/3.utils/define-nuxt-component.md    | 31 ++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/docs/content/3.api/3.utils/define-nuxt-component.md b/docs/content/3.api/3.utils/define-nuxt-component.md
index 5e41fd6fadf..3e3744e1330 100644
--- a/docs/content/3.api/3.utils/define-nuxt-component.md
+++ b/docs/content/3.api/3.utils/define-nuxt-component.md
@@ -1,12 +1,12 @@
 # `defineNuxtComponent`
 
-`defineNuxtComponent()` is a helper function for defining type safe Vue components within a Nuxt application. `defineNuxtComponent()` is a wrapper around [defineComponent()](https://vuejs.org/api/general.html#definecomponent) function that supports inferring the props passed to `setup()` function when we use Composition API without `<script setup>`.
+`defineNuxtComponent()` is a helper function for defining type safe Vue components within a Nuxt application.
 
-`defineNuxtComponent()` also takes care of resolving the promise returned by `useAsyncData()` in Vue components found at `components/` and `pages/` directory or in the `~/app.vue` component found at the root of your Nuxt application.
+`defineNuxtComponent()` is a wrapper around [defineComponent()](https://vuejs.org/api/general.html#definecomponent) function that supports inferring the props passed to `setup()` function when we use Composition API without `<script setup>`.
 
-Any Vue 3 components written in Nuxt application without `<script setup lang=“ts”>` can use `defineNuxtComponent()` helper function to leverage the benefits of TypeScript.
+## `useAsyncData`
 
-## Example
+`defineNuxtComponent()` also takes care of resolving the promise returned by `useAsyncData()` in Vue components found at `components/` and `pages/` directory or in the `~/app.vue` component found at the root of your Nuxt application.
 
 ```vue [pages/index.vue]
   <script lang="ts">
@@ -21,3 +21,26 @@ Any Vue 3 components written in Nuxt application without `<script setup lang=“
     })
   </script>
 ```
+
+## `asyncData`
+
+Taking Composition API into account, using `<script setup lang=“ts”>` is the recommended way of declaring Vue components in Nuxt 3.
+
+However, if page components in your Nuxt 3 project still use `asyncData()` hook of the Options API, then you can use `defineNuxtComponent()` helper function to leverage the benefits of TypeScript.
+
+```vue [pages/index.vue]
+  <script lang="ts">
+    export default defineNuxtComponent({
+      asyncData() {
+        return {
+           data: {
+            greetings: 'hello world!'
+          }
+        }
+      },
+      async setup(props) {
+        // ...
+      }
+    })
+  </script>
+```

From 79515a2eff78724cee6699c0d96d87a66a61a820 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Damian=20G=C5=82owala?=
 <48835293+DamianGlowala@users.noreply.github.com>
Date: Sun, 18 Sep 2022 10:14:20 +0200
Subject: [PATCH 5/9] Update define-nuxt-component.md

---
 .../3.api/3.utils/define-nuxt-component.md    | 56 +++++++++----------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/docs/content/3.api/3.utils/define-nuxt-component.md b/docs/content/3.api/3.utils/define-nuxt-component.md
index 3e3744e1330..61d39daedff 100644
--- a/docs/content/3.api/3.utils/define-nuxt-component.md
+++ b/docs/content/3.api/3.utils/define-nuxt-component.md
@@ -1,46 +1,46 @@
 # `defineNuxtComponent`
 
-`defineNuxtComponent()` is a helper function for defining type safe Vue components within a Nuxt application.
+`defineNuxtComponent()` is a helper function for defining type-safe Vue components within your Nuxt application.
 
 `defineNuxtComponent()` is a wrapper around [defineComponent()](https://vuejs.org/api/general.html#definecomponent) function that supports inferring the props passed to `setup()` function when we use Composition API without `<script setup>`.
 
 ## `useAsyncData`
 
-`defineNuxtComponent()` also takes care of resolving the promise returned by `useAsyncData()` in Vue components found at `components/` and `pages/` directory or in the `~/app.vue` component found at the root of your Nuxt application.
+`defineNuxtComponent()` also takes care of resolving the promise returned by `useAsyncData()` in Vue components found at `components/` and `pages/` directory, or in the `~/app.vue` component found at the root of your Nuxt application:
 
 ```vue [pages/index.vue]
-  <script lang="ts">
-    export default defineNuxtComponent({
-      async setup(props) {
-        const { data } = await useAsyncData(() => Promise.resolve('Hello world!'))
-  
-        return {
-            data
-        }
-      }
-    })
-  </script>
+<script lang="ts">
+export default defineNuxtComponent({
+  async setup(props) {
+    const { data } = await useAsyncData(() => Promise.resolve('Hello world!'))
+
+    return {
+      data
+    }
+  }
+})
+</script>
 ```
 
 ## `asyncData`
 
-Taking Composition API into account, using `<script setup lang=“ts”>` is the recommended way of declaring Vue components in Nuxt 3.
+Taking Composition API into account, using `<script setup lang="ts">` is the recommended way of declaring Vue components in Nuxt 3.
 
-However, if page components in your Nuxt 3 project still use `asyncData()` hook of the Options API, then you can use `defineNuxtComponent()` helper function to leverage the benefits of TypeScript.
+However, if page components in your Nuxt 3 project still use `asyncData()` hook of the Options API, then you can use `defineNuxtComponent()` helper function to leverage the benefits of TypeScript:
 
 ```vue [pages/index.vue]
-  <script lang="ts">
-    export default defineNuxtComponent({
-      asyncData() {
-        return {
-           data: {
-            greetings: 'hello world!'
-          }
-        }
-      },
-      async setup(props) {
-        // ...
+<script lang="ts">
+export default defineNuxtComponent({
+  asyncData() {
+    return {
+      data: {
+        greetings: 'hello world!'
       }
-    })
-  </script>
+    }
+  },
+  async setup(props) {
+    // ...
+  }
+})
+</script>
 ```

From b563681a6c38afca4c2f2b87fa3e6f4bebe3e16f Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pooya@pi0.io>
Date: Tue, 20 Sep 2022 10:47:12 +0200
Subject: [PATCH 6/9] small tweaks, add banners

---
 .../1.getting-started/6.data-fetching.md      |  7 +++
 .../3.api/3.utils/define-nuxt-component.md    | 45 +++++++++++--------
 docs/utils/createTitle.js                     |  2 +-
 3 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/docs/content/1.getting-started/6.data-fetching.md b/docs/content/1.getting-started/6.data-fetching.md
index 6104ad4df0b..03c5cee2b75 100644
--- a/docs/content/1.getting-started/6.data-fetching.md
+++ b/docs/content/1.getting-started/6.data-fetching.md
@@ -203,6 +203,13 @@ export default defineNuxtComponent({
 Options API support for `asyncData` may well change before the stable release of Nuxt 3.
 ::
 
+::Alert
+Using `<script setup lang="ts">` is the recommended way of declaring Vue components in Nuxt 3.
+::
+
+::ReadMore{link="/api/utils/define-nuxt-component"}
+::
+
 ## 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/docs/content/3.api/3.utils/define-nuxt-component.md b/docs/content/3.api/3.utils/define-nuxt-component.md
index 61d39daedff..d71e99993c1 100644
--- a/docs/content/3.api/3.utils/define-nuxt-component.md
+++ b/docs/content/3.api/3.utils/define-nuxt-component.md
@@ -1,45 +1,52 @@
 # `defineNuxtComponent`
 
-`defineNuxtComponent()` is a helper function for defining type-safe Vue components within your Nuxt application.
+`defineNuxtComponent()` is a helper function for defining type safe Vue components using options API similar to [defineComponent()](https://vuejs.org/api/general.html#definecomponent). `defineNuxtComponent()` wrapper also adds support for `asyncData` component option.
 
-`defineNuxtComponent()` is a wrapper around [defineComponent()](https://vuejs.org/api/general.html#definecomponent) function that supports inferring the props passed to `setup()` function when we use Composition API without `<script setup>`.
+::alert{type=warning}
+Options API support for `asyncData` may well change before the stable release of Nuxt 3.
+::
 
-## `useAsyncData`
+::Alert
+Using `<script setup lang="ts">` is the recommended way of declaring Vue components in Nuxt 3.
+::
 
-`defineNuxtComponent()` also takes care of resolving the promise returned by `useAsyncData()` in Vue components found at `components/` and `pages/` directory, or in the `~/app.vue` component found at the root of your Nuxt application:
+:ReadMore{link=/getting-started/data-fetching#options-api-support}
+
+## `asyncData()`
+
+
+If you choose to use options API to define components in your Nuxt 3, you can use `asyncData()` utility:
 
 ```vue [pages/index.vue]
 <script lang="ts">
 export default defineNuxtComponent({
-  async setup(props) {
-    const { data } = await useAsyncData(() => Promise.resolve('Hello world!'))
-
+  asyncData() {
     return {
-      data
+      data: {
+        greetings: 'hello world!'
+      }
     }
+  },
+  async setup(props) {
+    // ...
   }
 })
 </script>
 ```
 
-## `asyncData`
-
-Taking Composition API into account, using `<script setup lang="ts">` is the recommended way of declaring Vue components in Nuxt 3.
+## `setup` function
 
-However, if page components in your Nuxt 3 project still use `asyncData()` hook of the Options API, then you can use `defineNuxtComponent()` helper function to leverage the benefits of TypeScript:
+`defineNuxtComponent()` also takes care of resolving the promise returned by `useAsyncData()` in Vue components found at `components/` and `pages/` directory, or in the `~/app.vue` component found at the root of your Nuxt application:
 
 ```vue [pages/index.vue]
 <script lang="ts">
 export default defineNuxtComponent({
-  asyncData() {
+  async setup(props) {
+    const { data } = await useAsyncData(() => Promise.resolve('Hello world!'))
+
     return {
-      data: {
-        greetings: 'hello world!'
-      }
+      data
     }
-  },
-  async setup(props) {
-    // ...
   }
 })
 </script>
diff --git a/docs/utils/createTitle.js b/docs/utils/createTitle.js
index 76d3430f23f..9aee444c4fe 100644
--- a/docs/utils/createTitle.js
+++ b/docs/utils/createTitle.js
@@ -1,5 +1,5 @@
 import { splitByCase, upperFirst } from 'scule'
 
 export default (title, link) => {
-  return title || (link.startsWith('http') && link) || link.split('/').filter(Boolean).map(part => splitByCase(part).map(p => upperFirst(p)).join(' ')).join(' > ').replace('Api', 'API')
+  return title || (link.startsWith('http') && link) || link.split(/[/#]/).filter(Boolean).map(part => splitByCase(part).map(p => upperFirst(p)).join(' ')).join(' > ').replace('Api', 'API')
 }

From 0602a40e5ac8269ea8605962fe3ec16f80bee816 Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pooya@pi0.io>
Date: Tue, 20 Sep 2022 10:47:45 +0200
Subject: [PATCH 7/9] lint

---
 docs/content/3.api/3.utils/define-nuxt-component.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/content/3.api/3.utils/define-nuxt-component.md b/docs/content/3.api/3.utils/define-nuxt-component.md
index d71e99993c1..a7641a8d746 100644
--- a/docs/content/3.api/3.utils/define-nuxt-component.md
+++ b/docs/content/3.api/3.utils/define-nuxt-component.md
@@ -14,7 +14,6 @@ Using `<script setup lang="ts">` is the recommended way of declaring Vue compone
 
 ## `asyncData()`
 
-
 If you choose to use options API to define components in your Nuxt 3, you can use `asyncData()` utility:
 
 ```vue [pages/index.vue]

From 0acbff1614a8c93e447de482ac9ef783c8f09fcb Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 20 Sep 2022 09:54:58 +0100
Subject: [PATCH 8/9] docs: tweaks

---
 docs/content/3.api/3.utils/define-nuxt-component.md | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/docs/content/3.api/3.utils/define-nuxt-component.md b/docs/content/3.api/3.utils/define-nuxt-component.md
index a7641a8d746..a481c701739 100644
--- a/docs/content/3.api/3.utils/define-nuxt-component.md
+++ b/docs/content/3.api/3.utils/define-nuxt-component.md
@@ -14,21 +14,18 @@ Using `<script setup lang="ts">` is the recommended way of declaring Vue compone
 
 ## `asyncData()`
 
-If you choose to use options API to define components in your Nuxt 3, you can use `asyncData()` utility:
+If you choose not to use `setup()` in your app, you can use the `asyncData()` method within your component definition:
 
 ```vue [pages/index.vue]
 <script lang="ts">
 export default defineNuxtComponent({
-  asyncData() {
+  async asyncData() {
     return {
       data: {
         greetings: 'hello world!'
       }
     }
   },
-  async setup(props) {
-    // ...
-  }
 })
 </script>
 ```

From 586bbe3e3695cb67bd66236a10a2b2579f831583 Mon Sep 17 00:00:00 2001
From: pooya parsa <pyapar@gmail.com>
Date: Tue, 20 Sep 2022 10:56:17 +0200
Subject: [PATCH 9/9] Update
 docs/content/3.api/3.utils/define-nuxt-component.md

Co-authored-by: Daniel Roe <daniel@roe.dev>
---
 .../3.api/3.utils/define-nuxt-component.md     | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/docs/content/3.api/3.utils/define-nuxt-component.md b/docs/content/3.api/3.utils/define-nuxt-component.md
index a481c701739..ed55f5edebb 100644
--- a/docs/content/3.api/3.utils/define-nuxt-component.md
+++ b/docs/content/3.api/3.utils/define-nuxt-component.md
@@ -29,21 +29,3 @@ export default defineNuxtComponent({
 })
 </script>
 ```
-
-## `setup` function
-
-`defineNuxtComponent()` also takes care of resolving the promise returned by `useAsyncData()` in Vue components found at `components/` and `pages/` directory, or in the `~/app.vue` component found at the root of your Nuxt application:
-
-```vue [pages/index.vue]
-<script lang="ts">
-export default defineNuxtComponent({
-  async setup(props) {
-    const { data } = await useAsyncData(() => Promise.resolve('Hello world!'))
-
-    return {
-      data
-    }
-  }
-})
-</script>
-```