composables/userequestclient

18 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

useRequestEvent composable returns incoming request event

The useRequestEvent composable accesses the incoming request event within the Nuxt context. It returns an event object that contains request properties such as path. In the browser environment, useRequestEvent will return undefined.

useRequestEvent example: access request path

The following example shows how to use useRequestEvent to get the underlying request event and access its path property: ```ts const event = useRequestEvent() const url = event?.path ```

useRequestFetch composable purpose

The useRequestFetch composable forwards the request context and headers when making server-side fetch requests. This is necessary for server-side rendering due to security considerations, as the browser does not automatically send headers during SSR like it does for client-side requests.

useRequestFetch headers not forwarded

Headers that are not meant to be forwarded will not be included in the request made by useRequestFetch. Examples of headers that are not forwarded include: transfer-encoding, connection, keep-alive, upgrade, expect, host, and accept.

useRequestFetch relationship to useFetch

The useFetch composable uses useRequestFetch under the hood to automatically forward the request context and headers.

useRequestFetch client-side behavior

In the browser during client-side navigation, useRequestFetch behaves just like regular $fetch.

useRequestFetch example with forwarding

This example shows using useRequestFetch to forward user headers to an API endpoint: ```vue <script setup lang="ts"> const requestFetch = useRequestFetch() const { data: forwarded } = await useAsyncData(() => requestFetch('/api/cookies')) </script> ``` The server-side event handler receives the forwarded cookies: ```ts export default defineEventHandler((event) => { const cookies = parseCookies(event) return { cookies } }) ``` Result: { cookies: { foo: 'bar' } }

useRequestFetch example without forwarding

Using $fetch directly without useRequestFetch will not forward request context and headers: ```vue <script setup lang="ts"> const { data: notForwarded } = await useAsyncData((_nuxtApp, { signal }) => $fetch('/api/cookies', { signal })) </script> ``` Result: { cookies: {} }

useRequestFetch minimum version

useRequestFetch is available in Nuxt 3.2 and later.

useRequestHeader composable signature

useRequestHeader is a composable that accepts a single string parameter specifying the name of the request header to access. It returns the value of the incoming request header or undefined if called in the browser.

useRequestHeader returns undefined in browser

When useRequestHeader is called in the browser environment, it always returns undefined. It only returns header values when called on the server side during SSR.

useRequestHeader example: authorization header

The following example shows how to use useRequestHeader to access the authorization request header: const authorization = useRequestHeader('authorization')

useRequestHeader example: middleware authorization check

export default defineNuxtRouteMiddleware((to, from) => { if (!useRequestHeader('authorization')) { return navigateTo('/not-authorized') } }) This example shows using useRequestHeader in a route middleware to check if the authorization header exists and redirect to /not-authorized if it does not.

useRequestHeader available in pages, components, and plugins

The useRequestHeader composable can be used within pages, components, and plugins.

useRequestHeader minimum version

useRequestHeader is available starting with Nuxt version 3.9 and later.

useRequestHeaders signature

useRequestHeaders is a composable that can be called with no arguments to get all request headers, or with an array of header names to get only specific headers. useRequestHeaders() returns all headers as an object. useRequestHeaders(['headerName']) returns an object with only the specified headers.

useRequestHeaders returns empty object in browser

When useRequestHeaders is called in the browser environment, it returns an empty object. It only returns actual header values during server-side rendering (SSR).

useRequestHeaders example with useFetch

The following code example shows how to use useRequestHeaders to proxy the authorization header from the initial request to a useFetch call: ```vue <script setup lang="ts"> const { data } = await useFetch('/api/confidential', { headers: useRequestHeaders(['authorization']), }) </script> ``` This allows passing specific headers from the incoming request to subsequent API calls during SSR.

Give your agent this brain