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

docs(api): add useRequestHeaders composable example #8833

Merged
merged 4 commits into from Nov 9, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 19 additions & 1 deletion docs/content/3.api/1.composables/use-request-headers.md
Expand Up @@ -5,7 +5,7 @@ description: "Use useRequestHeaders to access the incoming request headers."

# `useRequestHeaders`

Within your pages, components, and plugins you can use `useRequestHeaders` to access the incoming request headers.
You can use built-in `useRequestHeaders` composable to access the incoming request headers within your pages, components, and plugins.

```js
// Get all request headers
Expand All @@ -18,3 +18,21 @@ const headers = useRequestHeaders(['cookie'])
::alert{icon=πŸ‘‰}
In the browser, `useRequestHeaders` will return an empty object.
::

## Example

We can use `useRequestHeaders` to access and proxy the initial request's `authorization` header to any future internal requests during SSR.

The example below adds the `authorization` request header to an isomorphic `$fetch` call.

```vue [pages/some-page.vue]
<script setup>
const { data } = await useFetch('/api/confidential', {
headers: useRequestHeaders(['authorization'])
})
</script>
```

::alert{icon=πŸ‘‰}
[Another example](/getting-started/data-fetching#example-pass-client-headers-to-the-api) shows how we can pass cookies from the initial request to another API route.
::