Skip to content
This repository was archived by the owner on Apr 6, 2023. It is now read-only.

docs(api): add defineNuxtComponent utils #7618

Merged
merged 9 commits into from
Sep 20, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions docs/content/1.getting-started/6.data-fetching.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
29 changes: 28 additions & 1 deletion docs/content/3.api/3.utils/define-nuxt-component.md
Original file line number Diff line number Diff line change
@@ -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>
```
2 changes: 1 addition & 1 deletion docs/utils/createTitle.js
Original file line number Diff line number Diff line change
@@ -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')
}