useResponseHeader

ソース
useResponseHeader を使用して、サーバーのレスポンスヘッダーを設定します。
このコンポーザブルは Nuxt v3.14 以降で利用可能です。

組み込みの useResponseHeader コンポーザブルを使用して、ページ、コンポーネント、およびプラグイン内で任意のサーバーレスポンスヘッダーを設定できます。

// Set a custom response header
const header = useResponseHeader('X-My-Header')
header.value = 'my-value'

例

useResponseHeader を使用すると、ページごとにレスポンスヘッダーを簡単に設定できます。

app/pages/test.vue
<script setup>
// pages/test.vue
const header = useResponseHeader('X-My-Header')
header.value = '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>

例えば、Nuxt の ミドルウェア で useResponseHeader を使用して、すべてのページにレスポンスヘッダーを設定できます。

app/middleware/my-header-middleware.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const header = useResponseHeader('X-My-Always-Header')
  header.value = `I'm Always here!`
})