docs(api): add defineNuxtComponent utils (nuxt#7618)

Co-authored-by: Daniel Roe <daniel@roe.dev> Co-authored-by: Damian Głowala <48835293+DamianGlowala@users.noreply.github.com> Co-authored-by: Pooya Parsa <pooya@pi0.io>
TheDutchCoder · Sep 20, 2022 · f82a4b6 · f82a4b6
1 parent 347abcd
commit f82a4b6
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git 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
@@ -1,4 +1,31 @@
 # `defineNuxtComponent`
 
-::NeedContribution
+`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.
+
+::alert{type=warning}
+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=/getting-started/data-fetching#options-api-support}
+
+## `asyncData()`
+
+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({
+  async asyncData() {
+    return {
+      data: {
+        greetings: 'hello world!'
+      }
+    }
+  },
+})
+</script>
+```
diff --git 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')
 }