Nuxt/docs/3.api/2.composables/use-response-header.md

title	description	links
useResponseHeader	Use useResponseHeader to set a server response header.	label icon to size Source i-simple-icons-github https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/ssr.ts xs

You can use the built-in useResponseHeader composable to set any server response header within your pages, components, and plugins.

// Set the a custom response header
useResponseHeader('X-My-Header', 'my-value');

::tip As it is not retreiving a value, useResponseHeader never returns anything. ::

Example

We can use useResponseHeader to easily set a response header on a per-page basis.

<script setup>
// pages/test.vue
useResponseHeader('X-My-Header', 'my-value');
</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 to set a response header for all pages.

export default defineNuxtRouteMiddleware((to, from) => {
  useResponseHeader('X-My-Header', 'my-value');
});