2024-05-09 14:22:13 +00:00
---
title: "useResponseHeader"
description: "Use useResponseHeader to set a server response header."
links:
- label: Source
icon: i-simple-icons-github
to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/ssr.ts
size: xs
---
You can use the built-in [`useResponseHeader` ](/docs/api/composables/use-response-header ) composable to set any server response header within your pages, components, and plugins.
```ts
// Set the a custom response header
2024-08-23 21:08:08 +00:00
const header = useResponseHeader('X-My-Header');
header.value = 'my-value';
2024-05-09 14:22:13 +00:00
```
## Example
We can use `useResponseHeader` to easily set a response header on a per-page basis.
```vue [pages/test.vue]
< script setup >
// pages/test.vue
2024-08-23 21:08:08 +00:00
const header = useResponseHeader('X-My-Header');
header.value = 'my-value';
2024-05-09 14:22:13 +00:00
< / script >
< template >
< h1 > Test page with custom header< / h1 >
< p > The response from the server for this "/test" page will have a custom "X-My-Header" header.< / p >
< / template >
```
We can use `useResponseHeader` for example in Nuxt [middleware ](/docs/guide/directory-structure/middleware ) to set a response header for all pages.
2024-08-23 21:08:08 +00:00
```ts [middleware/my-header-middleware.ts]
2024-05-09 14:22:13 +00:00
export default defineNuxtRouteMiddleware((to, from) => {
2024-08-23 21:08:08 +00:00
const header = useResponseHeader('X-My-Always-Header');
header.value = `I'm Always here!` ;
2024-05-09 14:22:13 +00:00
});
2024-08-23 21:08:08 +00:00
2024-05-09 14:22:13 +00:00
```