small tweaks, add banners

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.

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>

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')
 }