createUseFetch default mode behavior
When passing a plain object to createUseFetch, the factory options act as defaults. Callers can override any option when calling the resulting composable.
composables/create-use-fetch
11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
createUseFetch options
createUseFetch accepts all the same options as useFetch, including baseURL, headers, query, onRequest, onResponse, server, lazy, transform, getCachedData, and more. See the useFetch documentation for the full list of parameters.
createUseFetch composable factory
createUseFetch is a factory function that creates a custom useFetch composable with pre-defined default options. The resulting composable is fully typed and works exactly like useFetch, but with custom defaults baked in.
createUseFetch is a compiler macro
createUseFetch is a compiler macro that must be used as an exported declaration in the composables/ directory (or any directory scanned by the Nuxt compiler). Nuxt automatically injects de-duplication keys at build time.
createUseFetch function signature
createUseFetch has two signatures: function createUseFetch(options?: Partial<UseFetchOptions>): typeof useFetch, and function createUseFetch(options: (callerOptions: UseFetchOptions) => Partial<UseFetchOptions>): typeof useFetch. The first accepts a plain object for default mode, the second accepts a function for override mode.
createUseFetch override mode behavior
When passing a function to createUseFetch, the factory options override the caller's options. The function receives the caller's options as its argument, allowing you to read them to compute your overrides. This is useful for enforcing settings like authentication headers or a specific base URL that should not be changed by the caller.
createUseFetch with custom $fetch instance
You can pass a custom $fetch instance to createUseFetch. The function signature (override mode) is required when using useNuxtApp() so that it is called in the setup context at the composable call site rather than in the module scope.
createUseFetch example with default mode
Example of createUseFetch in default mode: ```ts export const useAPI = createUseFetch({ baseURL: 'https://api.nuxt.com', lazy: true, }) ``` Callers can use the default baseURL or override it: ```ts const { data } = await useAPI('/modules') const { data } = await useAPI('/modules', { baseURL: 'https://other-api.com' }) ```
createUseFetch example with override mode
Example of createUseFetch in override mode: ```ts export const useAPI = createUseFetch(callerOptions => ({ baseURL: 'https://api.nuxt.com', })) ``` The baseURL is always enforced regardless of what the caller passes.
createUseFetch example with custom $fetch
Example of createUseFetch with a custom $fetch instance: ```ts export const useAPI = createUseFetch(callerOptions => ({ $fetch: useNuxtApp().$api as typeof $fetch, ...callerOptions, })) ```
createUseFetch basic usage example
Basic usage example of createUseFetch: ```ts export const useAPI = createUseFetch({ baseURL: 'https://api.nuxt.com', }) ``` Then use it in a component: ```vue <script setup lang="ts"> const { data: modules } = await useAPI('/modules') </script> ```