useResponseHeader
サーバーレスポンスヘッダーを設定するには、useResponseHeader を使用します。
このコンポーザブルは、Nuxt v3.14 以降で使用できます。
組み込みの useResponseHeader コンポーザブルを使用すると、ページ、コンポーネント、プラグイン内でサーバーレスポンスヘッダーを設定できます。
// Set the a custom response header
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>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 を使用して、すべてのページのレスポンスヘッダーを設定できます。
middleware/my-header-middleware.ts
export default defineNuxtRouteMiddleware((to, from) => {
const header = useResponseHeader('X-My-Always-Header');
header.value = `I'm Always here!`;
});