From cff7f5987a80c1c6af3e31b72183fd0cc9701a66 Mon Sep 17 00:00:00 2001
From: Jelmer de Maat <jelmer@netvlies.nl>
Date: Thu, 9 May 2024 16:21:04 +0200
Subject: [PATCH 1/8] feat(composables): start new useResponseHeader and
 useResponseHeaders composables

---
 packages/nuxt/src/app/composables/index.ts |  2 +-
 packages/nuxt/src/app/composables/ssr.ts   | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/nuxt/src/app/composables/index.ts b/packages/nuxt/src/app/composables/index.ts
index dbb5e96079..847609dfc7 100644
--- a/packages/nuxt/src/app/composables/index.ts
+++ b/packages/nuxt/src/app/composables/index.ts
@@ -24,7 +24,7 @@ export { useFetch, useLazyFetch } from './fetch'
 export type { FetchResult, UseFetchOptions } from './fetch'
 export { useCookie, refreshCookie } from './cookie'
 export type { CookieOptions, CookieRef } from './cookie'
-export { onPrehydrate, prerenderRoutes, useRequestHeaders, useRequestEvent, useRequestFetch, setResponseStatus } from './ssr'
+export { onPrehydrate, prerenderRoutes, useRequestHeaders, useRequestEvent, useRequestFetch, setResponseStatus, useResponseHeader, useResponseHeaders } from './ssr'
 export { onNuxtReady } from './ready'
 export { abortNavigation, addRouteMiddleware, defineNuxtRouteMiddleware, onBeforeRouteLeave, onBeforeRouteUpdate, setPageLayout, navigateTo, useRoute, useRouter } from './router'
 export type { AddRouteMiddlewareOptions, RouteMiddleware } from './router'
diff --git a/packages/nuxt/src/app/composables/ssr.ts b/packages/nuxt/src/app/composables/ssr.ts
index 56f3383109..9002f03c2f 100644
--- a/packages/nuxt/src/app/composables/ssr.ts
+++ b/packages/nuxt/src/app/composables/ssr.ts
@@ -1,5 +1,5 @@
 import type { H3Event } from 'h3'
-import { setResponseStatus as _setResponseStatus, appendHeader, getRequestHeader, getRequestHeaders } from 'h3'
+import { setResponseStatus as _setResponseStatus, appendHeader, getRequestHeader, getRequestHeaders, setResponseHeader, setResponseHeaders } from 'h3'
 import { getCurrentInstance } from 'vue'
 import { useServerHead } from '@unhead/vue'
 
@@ -61,6 +61,20 @@ export function setResponseStatus (arg1: H3Event | number | undefined, arg2?: nu
   }
 }
 
+/** @since 3.11.3 */
+export function useResponseHeader (header: string, value: string) {
+  if (import.meta.client) { return undefined }
+  const event = useRequestEvent()
+  return event ? setResponseHeader(event, header, value) : undefined
+}
+
+/** @since 3.11.3 */
+export function useResponseHeaders (headers: Record<string, string>) {
+  if (import.meta.client) { return undefined }
+  const event = useRequestEvent()
+  return event ? setResponseHeaders(event, headers) : undefined
+}
+
 /** @since 3.8.0 */
 export function prerenderRoutes (path: string | string[]) {
   if (!import.meta.server || !import.meta.prerender) { return }

From 22cb24865b71b6698c5c3e7cff90f86ecb32ed5b Mon Sep 17 00:00:00 2001
From: Jelmer de Maat <jelmer@netvlies.nl>
Date: Thu, 9 May 2024 16:22:13 +0200
Subject: [PATCH 2/8] docs(composables): document new useResponseHeader and
 useResponseHeaders composables

---
 .../2.composables/use-response-header.md      | 44 +++++++++++++++++++
 .../2.composables/use-response-headers.md     | 44 +++++++++++++++++++
 2 files changed, 88 insertions(+)
 create mode 100644 docs/3.api/2.composables/use-response-header.md
 create mode 100644 docs/3.api/2.composables/use-response-headers.md

diff --git a/docs/3.api/2.composables/use-response-header.md b/docs/3.api/2.composables/use-response-header.md
new file mode 100644
index 0000000000..c6234c17a0
--- /dev/null
+++ b/docs/3.api/2.composables/use-response-header.md
@@ -0,0 +1,44 @@
+---
+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
+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.
+
+```vue [pages/test.vue]
+<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](/docs/guide/directory-structure/middleware) to set a response header for all pages.
+
+```ts [middleware/my-middleware.ts]
+export default defineNuxtRouteMiddleware((to, from) => {
+  useResponseHeader('X-My-Header', 'my-value');
+});
+```
diff --git a/docs/3.api/2.composables/use-response-headers.md b/docs/3.api/2.composables/use-response-headers.md
new file mode 100644
index 0000000000..71e3fe64e8
--- /dev/null
+++ b/docs/3.api/2.composables/use-response-headers.md
@@ -0,0 +1,44 @@
+---
+title: "useResponseHeaders"
+description: "Use useResponseHeaders to set multiple server response headers."
+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 [`useResponseHeaders`](/docs/api/composables/use-response-headers) composable to set multiple server response headers within your pages, components, and plugins.
+
+```ts
+// Set the a custom response header
+useResponseHeaders({ 'X-My-Header': 'my-value', 'X-My-Other-Header': 'my-other-value' });
+```
+
+::tip
+As it is not retreiving values, `useResponseHeaders` never returns anything.
+::
+
+## Example
+
+We can use `useResponseHeaders` to easily set response headers on a per-page basis.
+
+```vue [pages/test.vue]
+<script setup>
+// pages/test.vue
+useResponseHeaders({ 'X-My-Header': 'my-value', 'X-My-Other-Header': 'my-other-value' });
+</script>
+
+<template>
+  <h1>Test page with custom headers</h1>
+  <p>The response from the server for this "/test" page will have the custom headers.</p>
+</template>
+```
+
+We can use `useResponseHeaders` for example in Nuxt [middleware](/docs/guide/directory-structure/middleware) to set response headers for all pages.
+
+```ts [middleware/my-middleware.ts]
+export default defineNuxtRouteMiddleware((to, from) => {
+  useResponseHeaders({ 'X-My-Header': 'my-value', 'X-My-Other-Header': 'my-other-value' });
+});
+```

From 867275c198a139049429fe70d4d9277dcc659670 Mon Sep 17 00:00:00 2001
From: Jelmer de Maat <jelmer@netvlies.nl>
Date: Fri, 23 Aug 2024 22:43:37 +0200
Subject: [PATCH 3/8] feat(composables): change new useResponseHeader
 composable to return computed value

---
 packages/nuxt/src/app/composables/ssr.ts | 26 ++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/nuxt/src/app/composables/ssr.ts b/packages/nuxt/src/app/composables/ssr.ts
index 9002f03c2f..e70768e2ce 100644
--- a/packages/nuxt/src/app/composables/ssr.ts
+++ b/packages/nuxt/src/app/composables/ssr.ts
@@ -1,6 +1,6 @@
 import type { H3Event } from 'h3'
-import { setResponseStatus as _setResponseStatus, appendHeader, getRequestHeader, getRequestHeaders, setResponseHeader, setResponseHeaders } from 'h3'
-import { getCurrentInstance } from 'vue'
+import { setResponseStatus as _setResponseStatus, appendHeader, getRequestHeader, getRequestHeaders, getResponseHeader, getResponseHeaders, removeResponseHeader, setResponseHeader, setResponseHeaders } from 'h3'
+import { computed, getCurrentInstance } from 'vue'
 import { useServerHead } from '@unhead/vue'
 
 import type { NuxtApp } from '../nuxt'
@@ -61,11 +61,25 @@ export function setResponseStatus (arg1: H3Event | number | undefined, arg2?: nu
   }
 }
 
-/** @since 3.11.3 */
-export function useResponseHeader (header: string, value: string) {
-  if (import.meta.client) { return undefined }
+/** @since 3.13.1 */
+export function useResponseHeader (header: string) {
+  if (import.meta.client) { return {} }
+
   const event = useRequestEvent()
-  return event ? setResponseHeader(event, header, value) : undefined
+  if (!event) { return {} }
+
+  return computed({
+    get () {
+      return getResponseHeader(event, header)
+    },
+    set (newValue) {
+      if (!newValue) {
+        return removeResponseHeader(event, header)
+      }
+
+      return setResponseHeader(event, header, newValue)
+    },
+  })
 }
 
 /** @since 3.11.3 */

From a9821066318b1587899376cfed25283c040a7878 Mon Sep 17 00:00:00 2001
From: Jelmer de Maat <jelmer@netvlies.nl>
Date: Fri, 23 Aug 2024 23:08:08 +0200
Subject: [PATCH 4/8] docs(composables): update new useResponseHeader examples

---
 docs/3.api/2.composables/use-response-header.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/3.api/2.composables/use-response-header.md b/docs/3.api/2.composables/use-response-header.md
index c6234c17a0..ba15a9cfb1 100644
--- a/docs/3.api/2.composables/use-response-header.md
+++ b/docs/3.api/2.composables/use-response-header.md
@@ -12,13 +12,10 @@ You can use the built-in [`useResponseHeader`](/docs/api/composables/use-respons
 
 ```ts
 // Set the a custom response header
-useResponseHeader('X-My-Header', 'my-value');
+const header = useResponseHeader('X-My-Header');
+header.value = '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.
@@ -26,7 +23,8 @@ We can use `useResponseHeader` to easily set a response header on a per-page bas
 ```vue [pages/test.vue]
 <script setup>
 // pages/test.vue
-useResponseHeader('X-My-Header', 'my-value');
+const header = useResponseHeader('X-My-Header');
+header.value = 'my-value';
 </script>
 
 <template>
@@ -37,8 +35,10 @@ useResponseHeader('X-My-Header', 'my-value');
 
 We can use `useResponseHeader` for example in Nuxt [middleware](/docs/guide/directory-structure/middleware) to set a response header for all pages.
 
-```ts [middleware/my-middleware.ts]
+```ts [middleware/my-header-middleware.ts]
 export default defineNuxtRouteMiddleware((to, from) => {
-  useResponseHeader('X-My-Header', 'my-value');
+  const header = useResponseHeader('X-My-Always-Header');
+  header.value = `I'm Always here!`;
 });
+
 ```

From 4243b2b0cacf07e5846fb8925dab8f3d95681d89 Mon Sep 17 00:00:00 2001
From: Jelmer de Maat <jelmer@netvlies.nl>
Date: Wed, 4 Sep 2024 22:06:30 +0200
Subject: [PATCH 5/8] feat(composables): drop plural "useResponseHeaders"

---
 .../2.composables/use-response-headers.md     | 44 -------------------
 packages/nuxt/src/app/composables/index.ts    |  2 +-
 packages/nuxt/src/app/composables/ssr.ts      | 11 +----
 packages/nuxt/src/app/index.ts                |  2 +-
 packages/nuxt/src/imports/presets.ts          |  2 +-
 5 files changed, 5 insertions(+), 56 deletions(-)
 delete mode 100644 docs/3.api/2.composables/use-response-headers.md

diff --git a/docs/3.api/2.composables/use-response-headers.md b/docs/3.api/2.composables/use-response-headers.md
deleted file mode 100644
index 71e3fe64e8..0000000000
--- a/docs/3.api/2.composables/use-response-headers.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: "useResponseHeaders"
-description: "Use useResponseHeaders to set multiple server response headers."
-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 [`useResponseHeaders`](/docs/api/composables/use-response-headers) composable to set multiple server response headers within your pages, components, and plugins.
-
-```ts
-// Set the a custom response header
-useResponseHeaders({ 'X-My-Header': 'my-value', 'X-My-Other-Header': 'my-other-value' });
-```
-
-::tip
-As it is not retreiving values, `useResponseHeaders` never returns anything.
-::
-
-## Example
-
-We can use `useResponseHeaders` to easily set response headers on a per-page basis.
-
-```vue [pages/test.vue]
-<script setup>
-// pages/test.vue
-useResponseHeaders({ 'X-My-Header': 'my-value', 'X-My-Other-Header': 'my-other-value' });
-</script>
-
-<template>
-  <h1>Test page with custom headers</h1>
-  <p>The response from the server for this "/test" page will have the custom headers.</p>
-</template>
-```
-
-We can use `useResponseHeaders` for example in Nuxt [middleware](/docs/guide/directory-structure/middleware) to set response headers for all pages.
-
-```ts [middleware/my-middleware.ts]
-export default defineNuxtRouteMiddleware((to, from) => {
-  useResponseHeaders({ 'X-My-Header': 'my-value', 'X-My-Other-Header': 'my-other-value' });
-});
-```
diff --git a/packages/nuxt/src/app/composables/index.ts b/packages/nuxt/src/app/composables/index.ts
index ce50b272eb..05ba560d09 100644
--- a/packages/nuxt/src/app/composables/index.ts
+++ b/packages/nuxt/src/app/composables/index.ts
@@ -24,7 +24,7 @@ export { useFetch, useLazyFetch } from './fetch'
 export type { FetchResult, UseFetchOptions } from './fetch'
 export { useCookie, refreshCookie } from './cookie'
 export type { CookieOptions, CookieRef } from './cookie'
-export { onPrehydrate, prerenderRoutes, useRequestHeaders, useRequestEvent, useRequestFetch, setResponseStatus, useResponseHeader, useResponseHeaders } from './ssr'
+export { onPrehydrate, prerenderRoutes, useRequestHeaders, useRequestEvent, useRequestFetch, setResponseStatus, useResponseHeader } from './ssr'
 export { onNuxtReady } from './ready'
 export { abortNavigation, addRouteMiddleware, defineNuxtRouteMiddleware, onBeforeRouteLeave, onBeforeRouteUpdate, setPageLayout, navigateTo, useRoute, useRouter } from './router'
 export type { AddRouteMiddlewareOptions, RouteMiddleware } from './router'
diff --git a/packages/nuxt/src/app/composables/ssr.ts b/packages/nuxt/src/app/composables/ssr.ts
index e70768e2ce..9edd2744d4 100644
--- a/packages/nuxt/src/app/composables/ssr.ts
+++ b/packages/nuxt/src/app/composables/ssr.ts
@@ -1,5 +1,5 @@
 import type { H3Event } from 'h3'
-import { setResponseStatus as _setResponseStatus, appendHeader, getRequestHeader, getRequestHeaders, getResponseHeader, getResponseHeaders, removeResponseHeader, setResponseHeader, setResponseHeaders } from 'h3'
+import { setResponseStatus as _setResponseStatus, appendHeader, getRequestHeader, getRequestHeaders, getResponseHeader, removeResponseHeader, setResponseHeader } from 'h3'
 import { computed, getCurrentInstance } from 'vue'
 import { useServerHead } from '@unhead/vue'
 
@@ -61,7 +61,7 @@ export function setResponseStatus (arg1: H3Event | number | undefined, arg2?: nu
   }
 }
 
-/** @since 3.13.1 */
+/** @since 3.13.2 */
 export function useResponseHeader (header: string) {
   if (import.meta.client) { return {} }
 
@@ -82,13 +82,6 @@ export function useResponseHeader (header: string) {
   })
 }
 
-/** @since 3.11.3 */
-export function useResponseHeaders (headers: Record<string, string>) {
-  if (import.meta.client) { return undefined }
-  const event = useRequestEvent()
-  return event ? setResponseHeaders(event, headers) : undefined
-}
-
 /** @since 3.8.0 */
 export function prerenderRoutes (path: string | string[]) {
   if (!import.meta.server || !import.meta.prerender) { return }
diff --git a/packages/nuxt/src/app/index.ts b/packages/nuxt/src/app/index.ts
index 363c72d1bf..43fcc404e1 100644
--- a/packages/nuxt/src/app/index.ts
+++ b/packages/nuxt/src/app/index.ts
@@ -1,7 +1,7 @@
 export { applyPlugin, applyPlugins, callWithNuxt, createNuxtApp, defineAppConfig, defineNuxtPlugin, definePayloadPlugin, isNuxtPlugin, registerPluginHooks, tryUseNuxtApp, useNuxtApp, useRuntimeConfig } from './nuxt'
 export type { CreateOptions, NuxtApp, NuxtPayload, NuxtPluginIndicator, NuxtSSRContext, ObjectPlugin, Plugin, PluginEnvContext, PluginMeta, ResolvedPluginMeta, RuntimeNuxtHooks } from './nuxt'
 
-export { defineNuxtComponent, useAsyncData, useLazyAsyncData, useNuxtData, refreshNuxtData, clearNuxtData, useHydration, callOnce, useState, clearNuxtState, clearError, createError, isNuxtError, showError, useError, useFetch, useLazyFetch, useCookie, refreshCookie, onPrehydrate, prerenderRoutes, useRequestHeaders, useRequestEvent, useRequestFetch, setResponseStatus, onNuxtReady, abortNavigation, addRouteMiddleware, defineNuxtRouteMiddleware, onBeforeRouteLeave, onBeforeRouteUpdate, setPageLayout, navigateTo, useRoute, useRouter, preloadComponents, prefetchComponents, preloadRouteComponents, isPrerendered, loadPayload, preloadPayload, definePayloadReducer, definePayloadReviver, getAppManifest, getRouteRules, reloadNuxtApp, useRequestURL, usePreviewMode, useId, useRouteAnnouncer, useHead, useSeoMeta, useServerSeoMeta } from './composables/index'
+export { defineNuxtComponent, useAsyncData, useLazyAsyncData, useNuxtData, refreshNuxtData, clearNuxtData, useHydration, callOnce, useState, clearNuxtState, clearError, createError, isNuxtError, showError, useError, useFetch, useLazyFetch, useCookie, refreshCookie, onPrehydrate, prerenderRoutes, useRequestHeaders, useRequestEvent, useRequestFetch, setResponseStatus, useResponseHeader, onNuxtReady, abortNavigation, addRouteMiddleware, defineNuxtRouteMiddleware, onBeforeRouteLeave, onBeforeRouteUpdate, setPageLayout, navigateTo, useRoute, useRouter, preloadComponents, prefetchComponents, preloadRouteComponents, isPrerendered, loadPayload, preloadPayload, definePayloadReducer, definePayloadReviver, getAppManifest, getRouteRules, reloadNuxtApp, useRequestURL, usePreviewMode, useId, useRouteAnnouncer, useHead, useSeoMeta, useServerSeoMeta } from './composables/index'
 export type { AddRouteMiddlewareOptions, AsyncData, AsyncDataOptions, AsyncDataRequestStatus, CookieOptions, CookieRef, FetchResult, NuxtAppManifest, NuxtAppManifestMeta, NuxtError, ReloadNuxtAppOptions, RouteMiddleware, UseFetchOptions } from './composables/index'
 
 export { defineNuxtLink } from './components/index'
diff --git a/packages/nuxt/src/imports/presets.ts b/packages/nuxt/src/imports/presets.ts
index 913448cc86..7934aa2ee2 100644
--- a/packages/nuxt/src/imports/presets.ts
+++ b/packages/nuxt/src/imports/presets.ts
@@ -66,7 +66,7 @@ const granularAppPresets: InlinePreset[] = [
     from: '#app/composables/cookie',
   },
   {
-    imports: ['onPrehydrate', 'prerenderRoutes', 'useRequestHeader', 'useRequestHeaders', 'useRequestEvent', 'useRequestFetch', 'setResponseStatus'],
+    imports: ['onPrehydrate', 'prerenderRoutes', 'useRequestHeader', 'useRequestHeaders', 'useResponseHeader', 'useRequestEvent', 'useRequestFetch', 'setResponseStatus'],
     from: '#app/composables/ssr',
   },
   {

From 269d16e461de046a1b8ea4c73772a99d630b1706 Mon Sep 17 00:00:00 2001
From: Jelmer de Maat <jelmer@netvlies.nl>
Date: Fri, 6 Sep 2024 09:26:23 +0200
Subject: [PATCH 6/8] feat(composables): add basic test for 'useResponseHeader'
 composable

---
 test/nuxt/composables.test.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/test/nuxt/composables.test.ts b/test/nuxt/composables.test.ts
index 8eeaf1d914..def0b5de84 100644
--- a/test/nuxt/composables.test.ts
+++ b/test/nuxt/composables.test.ts
@@ -12,7 +12,7 @@ import * as composables from '#app/composables'
 import { clearNuxtData, refreshNuxtData, useAsyncData, useNuxtData } from '#app/composables/asyncData'
 import { clearError, createError, isNuxtError, showError, useError } from '#app/composables/error'
 import { onNuxtReady } from '#app/composables/ready'
-import { setResponseStatus, useRequestEvent, useRequestFetch, useRequestHeaders } from '#app/composables/ssr'
+import { setResponseStatus, useRequestEvent, useRequestFetch, useRequestHeaders, useResponseHeader } from '#app/composables/ssr'
 import { clearNuxtState, useState } from '#app/composables/state'
 import { useRequestURL } from '#app/composables/url'
 import { getAppManifest, getRouteRules } from '#app/composables/manifest'
@@ -83,6 +83,7 @@ describe('composables', () => {
       'useRequestFetch',
       'isPrerendered',
       'useRequestHeaders',
+      'useResponseHeader',
       'useCookie',
       'clearNuxtState',
       'useState',
@@ -394,6 +395,7 @@ describe('ssr composables', () => {
     expect(useRequestFetch()).toEqual($fetch)
     expect(useRequestHeaders()).toEqual({})
     expect(prerenderRoutes('/')).toBeUndefined()
+    expect(useResponseHeader()).toEqual({})
   })
 })
 

From 529ed0ba0072e765e87c401ebf5c691c955e7241 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Thu, 19 Sep 2024 14:55:09 +0100
Subject: [PATCH 7/8] chore: update `@since` tag

---
 packages/nuxt/src/app/composables/ssr.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nuxt/src/app/composables/ssr.ts b/packages/nuxt/src/app/composables/ssr.ts
index 9edd2744d4..5f8c5e4d8f 100644
--- a/packages/nuxt/src/app/composables/ssr.ts
+++ b/packages/nuxt/src/app/composables/ssr.ts
@@ -61,7 +61,7 @@ export function setResponseStatus (arg1: H3Event | number | undefined, arg2?: nu
   }
 }
 
-/** @since 3.13.2 */
+/** @since 3.14.0 */
 export function useResponseHeader (header: string) {
   if (import.meta.client) { return {} }
 

From 81ef3c247d875dd2b9d965a32d235bc173b0a0ee Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Thu, 19 Sep 2024 15:07:00 +0100
Subject: [PATCH 8/8] refactor: warn when setting `useResponseHeader` on client

---
 packages/nuxt/src/app/composables/ssr.ts | 22 +++++++++++++++++++---
 test/nuxt/composables.test.ts            |  2 +-
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/nuxt/src/app/composables/ssr.ts b/packages/nuxt/src/app/composables/ssr.ts
index 5f8c5e4d8f..35df8dc628 100644
--- a/packages/nuxt/src/app/composables/ssr.ts
+++ b/packages/nuxt/src/app/composables/ssr.ts
@@ -1,6 +1,6 @@
 import type { H3Event } from 'h3'
 import { setResponseStatus as _setResponseStatus, appendHeader, getRequestHeader, getRequestHeaders, getResponseHeader, removeResponseHeader, setResponseHeader } from 'h3'
-import { computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, ref } from 'vue'
 import { useServerHead } from '@unhead/vue'
 
 import type { NuxtApp } from '../nuxt'
@@ -63,10 +63,26 @@ export function setResponseStatus (arg1: H3Event | number | undefined, arg2?: nu
 
 /** @since 3.14.0 */
 export function useResponseHeader (header: string) {
-  if (import.meta.client) { return {} }
+  if (import.meta.client) {
+    if (import.meta.dev) {
+      return computed({
+        get: () => undefined,
+        set: () => console.warn('[nuxt] Setting response headers is not supported in the browser.'),
+      })
+    }
+    return ref()
+  }
 
   const event = useRequestEvent()
-  if (!event) { return {} }
+  if (!event) {
+    if (import.meta.dev) {
+      return computed({
+        get: () => undefined,
+        set: () => console.warn('[nuxt] Setting response headers is not supported in the browser.'),
+      })
+    }
+    return ref()
+  }
 
   return computed({
     get () {
diff --git a/test/nuxt/composables.test.ts b/test/nuxt/composables.test.ts
index def0b5de84..1e56ce4902 100644
--- a/test/nuxt/composables.test.ts
+++ b/test/nuxt/composables.test.ts
@@ -395,7 +395,7 @@ describe('ssr composables', () => {
     expect(useRequestFetch()).toEqual($fetch)
     expect(useRequestHeaders()).toEqual({})
     expect(prerenderRoutes('/')).toBeUndefined()
-    expect(useResponseHeader()).toEqual({})
+    expect(useResponseHeader('x-test').value).toBeUndefined()
   })
 })