useResponseHeader

useResponseHeader を使用してサーバーのレスポンスヘッダーを設定します。

このコンポーザブルは Nuxt v3.14+ で利用可能です。

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

// カスタムレスポンスヘッダーを設定
const header = useResponseHeader('X-My-Header');
header.value = 'my-value';

例

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

pages/test.vue

<script setup>
// pages/test.vue
const header = useResponseHeader('X-My-Header');
header.value = 'my-value';
</script>

<template>
  <h1>カスタムヘッダー付きのテストページ</h1>
  <p>この "/test" ページのサーバーからのレスポンスには、カスタム "X-My-Header" ヘッダーが含まれます。</p>
</template>

useResponseHeader を使用して、例えば Nuxt の middleware で全ページに対してレスポンスヘッダーを設定することができます。

middleware/my-header-middleware.ts

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

※このページは Nuxt.js 公式ドキュメントの翻訳ページ（非公式）です。

公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/3.x/api/composables/use-response-header