Skip to main content
You can use built-in useRequestHeaders composable to access the incoming request headers within your pages, components, and plugins.
// Get all request headers
const headers = useRequestHeaders()

// Get only cookie request header
const { cookie } = useRequestHeaders(['cookie'])
In the browser, useRequestHeaders will return an empty object.

Parameters

include
string[]
An optional array of header names to include. If provided, only the specified headers will be returned.

Return Values

headers
Record<string, string>
An object containing the requested headers. Returns an empty object on the client side.

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.
[app/pages/some-page.vue]
<script setup lang="ts">
const { data } = await useFetch('/api/confidential', {
  headers: useRequestHeaders(['authorization']),
})
</script>

Type

export function useRequestHeaders<K extends string = string>(
  include?: K[]
): Record<Lowercase<K>, string>