feat(nuxt): useResponseHeader and useResponseHeaders

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');
+});
+```

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' });
+});
+```

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'

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 }