nuxt-openapi-hyperfetch 0.1.5-alpha.1 → 0.1.7-alpha.1

package/dist/cli/logo.js

@@ -1,11 +1,11 @@
 import gradient from 'gradient-string';
 const NUXT_LOGO = `███╗   ██╗██╗   ██╗██╗  ██╗████████╗
 ████╗  ██║██║   ██║╚██╗██╔╝╚══██╔══╝
-██╔██╗ ██║██║   ██║ ╚███╔╝    ██║   
-██║╚██╗██║██║   ██║ ██╔██╗    ██║   
-██║ ╚████║╚██████╔╝██╔╝ ██╗   ██║   
+██╔██╗ ██║██║   ██║ ╚███╔╝    ██║
+██║╚██╗██║██║   ██║ ██╔██╗    ██║
+██║ ╚████║╚██████╔╝██╔╝ ██╗   ██║
 ╚═╝  ╚═══╝ ╚═════╝ ╚═╝  ╚═╝   ╚═╝`;
-const SUBTITLE = '   Swagger OpenAPI Generator v1.0';
+const SUBTITLE = 'Nuxt OpenAPI Generator - useFetch, useAsyncData & Nuxt server';
 /**
  * Display the Nuxt logo with gradient colors
  * - Green gradient for Nuxt logo (official Nuxt color #00DC82)

package/dist/generators/shared/runtime/apiHelpers.d.ts

@@ -119,6 +119,23 @@ export interface ApiRequestOptions<T = any> {
      * pick: ['person.name', 'person.email', 'status']
      */
     pick?: ReadonlyArray<string>;
+    /**
+     * Custom cache key for useAsyncData. If provided, used as-is instead of the auto-generated key.
+     * Useful for manual cache control or sharing cache between components.
+     */
+    cacheKey?: string;
+    /** Base URL prepended to every request URL. Overrides runtimeConfig.public.apiBaseUrl. */
+    baseURL?: string;
+    /** HTTP method (GET, POST, PUT, PATCH, DELETE, etc.) */
+    method?: string;
+    /** Request body */
+    body?: any;
+    /** Request headers */
+    headers?: Record<string, string> | HeadersInit;
+    /** URL query parameters */
+    query?: Record<string, any>;
+    /** Alias for query */
+    params?: Record<string, any>;
 }
 /**
  * Helper function to apply request modifications from onRequest interceptor

package/dist/generators/use-async-data/runtime/useApiAsyncData.d.ts

@@ -1,31 +1,18 @@
+import type { UseFetchOptions } from '#app';
 import { type ApiRequestOptions as BaseApiRequestOptions } from '../../shared/runtime/apiHelpers.js';
 /**
- * Extended options specific to useAsyncData
+ * Options for useAsyncData API requests with lifecycle callbacks.
+ * Extends all native Nuxt useFetch options plus our custom callbacks, transform, and pick.
+ * Native options like baseURL, method, body, headers, query, lazy, server, immediate, dedupe, etc. are all available.
+ * watch: boolean (true = auto-watch reactive params, false = disable auto-refresh)
  */
-export interface ApiAsyncDataOptions<T> extends BaseApiRequestOptions<T> {
+export type ApiAsyncDataOptions<T> = BaseApiRequestOptions<T> & Omit<UseFetchOptions<T>, 'transform' | 'pick' | 'watch'> & {
     /**
-     * Whether to fetch data immediately on mount (default: true)
-     */
-    immediate?: boolean;
-    /**
-     * Lazy mode: don't block navigation (default: false)
-     */
-    lazy?: boolean;
-    /**
-     * Server-side rendering mode (default: true)
-     */
-    server?: boolean;
-    /**
-     * Deduplicate requests with the same key (default: 'cancel')
-     */
-    dedupe?: 'cancel' | 'defer';
-    /**
-     * Disable automatic refresh when reactive params change.
-     * Set to false to prevent re-fetching when params/url refs update.
-     * @default true
+     * Enable automatic refresh when reactive params/url change (default: true).
+     * Set to false to disable auto-refresh entirely.
      */
     watch?: boolean;
-}
+};
 /**
  * Generic wrapper for API calls using Nuxt's useAsyncData
  * Supports:

package/dist/generators/use-async-data/runtime/useApiAsyncData.js

@@ -9,9 +9,9 @@ import { getGlobalHeaders, getGlobalBaseUrl, applyPick, mergeCallbacks, } from '
  * - Watch pattern for reactive parameters
  */
 export function useApiAsyncData(key, url, options) {
-    const { method = 'GET', body, headers = {}, params, transform, pick, onRequest, onSuccess, onError, onFinish, skipGlobalCallbacks, immediate = true, lazy = false, server = true, dedupe = 'cancel', watch: watchOption = true, ...restOptions } = options || {};
+    const { method = 'GET', body, headers = {}, params, baseURL, cacheKey, transform, pick, onRequest, onSuccess, onError, onFinish, skipGlobalCallbacks, immediate = true, lazy = false, server = true, dedupe = 'cancel', watch: watchOption = true, ...restOptions } = options || {};
     // Resolve base URL once at setup time (not inside fetchFn to avoid warning on every request)
-    const resolvedBaseURL = restOptions.baseURL || getGlobalBaseUrl();
+    const resolvedBaseURL = baseURL || getGlobalBaseUrl();
     if (!resolvedBaseURL) {
         console.warn('[nuxt-openapi-hyperfetch] No baseURL configured. Set runtimeConfig.public.apiBaseUrl in nuxt.config.ts or pass baseURL in options.');
     }
@@ -30,6 +30,18 @@ export function useApiAsyncData(key, url, options) {
                         : []
                 : []),
         ];
+    // Build a reactive cache key: composableName + resolved URL + serialized query params
+    // This ensures distinct params produce distinct keys — preventing cache collisions
+    const computedKey = () => {
+        if (cacheKey)
+            return cacheKey;
+        const resolvedUrl = typeof url === 'function' ? url() : url;
+        const resolvedParams = toValue(params);
+        const paramsSuffix = resolvedParams && typeof resolvedParams === 'object' && Object.keys(resolvedParams).length > 0
+            ? '-' + JSON.stringify(resolvedParams)
+            : '';
+        return `${key}-${resolvedUrl}${paramsSuffix}`;
+    };
     // Fetch function for useAsyncData
     const fetchFn = async () => {
         // Get URL value for merging callbacks
@@ -116,13 +128,13 @@ export function useApiAsyncData(key, url, options) {
             }
         }
     };
-    // Use Nuxt's useAsyncData
-    const result = useAsyncData(key, fetchFn, {
+    // Use Nuxt's useAsyncData with a computed key for proper cache isolation per params
+    const result = useAsyncData(computedKey, fetchFn, {
         immediate,
         lazy,
         server,
         dedupe,
-        watch: watchSources.length > 0 ? watchSources : undefined,
+        watch: watchOption === false ? [] : watchSources,
     });
     return result;
 }

package/dist/generators/use-async-data/runtime/useApiAsyncDataRaw.d.ts

@@ -1,3 +1,4 @@
+import type { UseFetchOptions } from '#app';
 import { type ApiRequestOptions as BaseApiRequestOptions } from '../../shared/runtime/apiHelpers.js';
 /**
  * Response structure for Raw version
@@ -10,11 +11,13 @@ export interface RawResponse<T> {
     statusText: string;
 }
 /**
- * Extended options specific to useAsyncData Raw version
+ * Options for useAsyncData Raw API requests.
+ * Extends all native Nuxt useFetch options plus our custom callbacks, transform, and pick.
+ * onSuccess receives data AND the full response (headers, status, statusText).
  */
-export interface ApiAsyncDataRawOptions<T> extends Omit<BaseApiRequestOptions<T>, 'onSuccess'> {
+export type ApiAsyncDataRawOptions<T> = Omit<BaseApiRequestOptions<T>, 'onSuccess'> & Omit<UseFetchOptions<T>, 'transform' | 'pick' | 'onSuccess'> & {
     /**
-     * Success callback that receives both data and full response
+     * Called when the request succeeds — receives both data and the full response object.
      */
     onSuccess?: (data: T, response: {
         headers: Headers;
@@ -22,23 +25,7 @@ export interface ApiAsyncDataRawOptions<T> extends Omit<BaseApiRequestOptions<T>
         statusText: string;
         url: string;
     }) => void | Promise<void>;
-    /**
-     * Whether to fetch data immediately on mount (default: true)
-     */
-    immediate?: boolean;
-    /**
-     * Lazy mode: don't block navigation (default: false)
-     */
-    lazy?: boolean;
-    /**
-     * Server-side rendering mode (default: true)
-     */
-    server?: boolean;
-    /**
-     * Deduplicate requests with the same key (default: 'cancel')
-     */
-    dedupe?: 'cancel' | 'defer';
-}
+};
 /**
  * Generic wrapper for API calls using Nuxt's useAsyncData - RAW VERSION
  * Returns full response with headers and status information

package/dist/generators/use-async-data/runtime/useApiAsyncDataRaw.js

@@ -12,9 +12,9 @@ import { getGlobalHeaders, getGlobalBaseUrl, applyPick, mergeCallbacks, } from '
  * - Watch pattern for reactive parameters
  */
 export function useApiAsyncDataRaw(key, url, options) {
-    const { method = 'GET', body, headers = {}, params, transform, pick, onRequest, onSuccess, onError, onFinish, skipGlobalCallbacks, immediate = true, lazy = false, server = true, dedupe = 'cancel', ...restOptions } = options || {};
+    const { method = 'GET', body, headers = {}, params, baseURL, cacheKey, transform, pick, onRequest, onSuccess, onError, onFinish, skipGlobalCallbacks, immediate = true, lazy = false, server = true, dedupe = 'cancel', ...restOptions } = options || {};
     // Resolve base URL once at setup time (not inside fetchFn to avoid warning on every request)
-    const resolvedBaseURL = restOptions.baseURL || getGlobalBaseUrl();
+    const resolvedBaseURL = baseURL || getGlobalBaseUrl();
     if (!resolvedBaseURL) {
         console.warn('[nuxt-openapi-hyperfetch] No baseURL configured. Set runtimeConfig.public.apiBaseUrl in nuxt.config.ts or pass baseURL in options.');
     }
@@ -24,6 +24,18 @@ export function useApiAsyncDataRaw(key, url, options) {
         ...(body && typeof body === 'object' ? [() => body] : []),
         ...(params && typeof params === 'object' ? [() => params] : []),
     ];
+    // Build a reactive cache key: composableName + resolved URL + serialized query params
+    // This ensures distinct params produce distinct keys — preventing cache collisions
+    const computedKey = () => {
+        if (cacheKey)
+            return cacheKey;
+        const resolvedUrl = typeof url === 'function' ? url() : url;
+        const resolvedParams = toValue(params);
+        const paramsSuffix = resolvedParams && typeof resolvedParams === 'object' && Object.keys(resolvedParams).length > 0
+            ? '-' + JSON.stringify(resolvedParams)
+            : '';
+        return `${key}-${resolvedUrl}${paramsSuffix}`;
+    };
     // Fetch function for useAsyncData
     const fetchFn = async () => {
         // Get URL value for merging callbacks
@@ -120,8 +132,8 @@ export function useApiAsyncDataRaw(key, url, options) {
             }
         }
     };
-    // Use Nuxt's useAsyncData
-    const result = useAsyncData(key, fetchFn, {
+    // Use Nuxt's useAsyncData with a computed key for proper cache isolation per params
+    const result = useAsyncData(computedKey, fetchFn, {
         immediate,
         lazy,
         server,

package/dist/generators/use-async-data/templates.js

@@ -117,7 +117,13 @@ function generateFunctionBody(method, isRaw, generateOptions) {
     // Choose the correct wrapper function
     const wrapperFunction = isRaw ? 'useApiAsyncDataRaw' : 'useApiAsyncData';
     const pInit = hasParams ? `\n  const p = shallowRef(params)` : '';
-    return `${description}export const ${composableName} = (${args}) => {${pInit}
+    const argsExtraction = hasParams
+        ? `  const _hasKey = typeof args[0] === 'string'\n  const params = _hasKey ? args[1] : args[0]\n  const options = _hasKey ? { cacheKey: args[0], ...args[2] } : args[1]`
+        : `  const _hasKey = typeof args[0] === 'string'\n  const options = _hasKey ? { cacheKey: args[0], ...args[1] } : args[0]`;
+    return `${description}export function ${composableName}(key: string, ${args})
+export function ${composableName}(${args})
+export function ${composableName}(...args: any[]) {
+${argsExtraction}${pInit}
   return ${wrapperFunction}${responseTypeGeneric}(${key}, ${url}, ${fetchOptions})
 }`;
 }

package/dist/generators/use-fetch/runtime/useApiRequest.d.ts

@@ -1,12 +1,11 @@
+import type { UseFetchOptions } from '#app';
 import { type ApiRequestOptions as BaseApiRequestOptions } from '../../shared/runtime/apiHelpers.js';
 /**
- * Options for useFetch API requests with lifecycle callbacks
- * Extends base options with useFetch-specific options
+ * Options for useFetch API requests with lifecycle callbacks.
+ * Extends all native Nuxt useFetch options plus our custom callbacks, transform, and pick.
+ * Native options like baseURL, method, body, headers, query, lazy, server, immediate, etc. are all available.
  */
-export interface ApiRequestOptions<T = any> extends BaseApiRequestOptions<T> {
-    /** All standard useFetch options */
-    [key: string]: any;
-}
+export type ApiRequestOptions<T = any> = BaseApiRequestOptions<T> & Omit<UseFetchOptions<T>, 'transform' | 'pick'>;
 /**
  * Enhanced useFetch wrapper with lifecycle callbacks and request interception
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-openapi-hyperfetch",
-  "version": "0.1.5-alpha.1",
+  "version": "0.1.7-alpha.1",
   "description": "Nuxt useFetch, useAsyncData and Nuxt server OpenAPI generator",
   "type": "module",
   "author": "",

package/src/cli/logo.ts

@@ -2,12 +2,12 @@ import gradient from 'gradient-string';
 
 const NUXT_LOGO = `███╗   ██╗██╗   ██╗██╗  ██╗████████╗
 ████╗  ██║██║   ██║╚██╗██╔╝╚══██╔══╝
-██╔██╗ ██║██║   ██║ ╚███╔╝    ██║   
-██║╚██╗██║██║   ██║ ██╔██╗    ██║   
-██║ ╚████║╚██████╔╝██╔╝ ██╗   ██║   
+██╔██╗ ██║██║   ██║ ╚███╔╝    ██║
+██║╚██╗██║██║   ██║ ██╔██╗    ██║
+██║ ╚████║╚██████╔╝██╔╝ ██╗   ██║
 ╚═╝  ╚═══╝ ╚═════╝ ╚═╝  ╚═╝   ╚═╝`;
 
-const SUBTITLE = '   Swagger OpenAPI Generator v1.0';
+const SUBTITLE = 'Nuxt OpenAPI Generator - useFetch, useAsyncData & Nuxt server';
 
 /**
  * Display the Nuxt logo with gradient colors

package/src/generators/shared/runtime/apiHelpers.ts

@@ -148,6 +148,32 @@ export interface ApiRequestOptions<T = any> {
    * pick: ['person.name', 'person.email', 'status']
    */
   pick?: ReadonlyArray<string>;
+
+  /**
+   * Custom cache key for useAsyncData. If provided, used as-is instead of the auto-generated key.
+   * Useful for manual cache control or sharing cache between components.
+   */
+  cacheKey?: string;
+
+  // --- Common fetch options (available in all composables) ---
+
+  /** Base URL prepended to every request URL. Overrides runtimeConfig.public.apiBaseUrl. */
+  baseURL?: string;
+
+  /** HTTP method (GET, POST, PUT, PATCH, DELETE, etc.) */
+  method?: string;
+
+  /** Request body */
+  body?: any;
+
+  /** Request headers */
+  headers?: Record<string, string> | HeadersInit;
+
+  /** URL query parameters */
+  query?: Record<string, any>;
+
+  /** Alias for query */
+  params?: Record<string, any>;
 }
 
 /**

package/src/generators/use-async-data/runtime/useApiAsyncData.ts

@@ -4,6 +4,7 @@
  * It requires Nuxt 3 to be installed in the target project
  */
 import { watch } from 'vue';
+import type { UseFetchOptions } from '#app';
 import {
   getGlobalHeaders,
   getGlobalBaseUrl,
@@ -29,36 +30,19 @@ type MaybeTransformed<T, Options> = Options extends { transform: (...args: any)
     : T;
 
 /**
- * Extended options specific to useAsyncData
+ * Options for useAsyncData API requests with lifecycle callbacks.
+ * Extends all native Nuxt useFetch options plus our custom callbacks, transform, and pick.
+ * Native options like baseURL, method, body, headers, query, lazy, server, immediate, dedupe, etc. are all available.
+ * watch: boolean (true = auto-watch reactive params, false = disable auto-refresh)
  */
-export interface ApiAsyncDataOptions<T> extends BaseApiRequestOptions<T> {
-  /**
-   * Whether to fetch data immediately on mount (default: true)
-   */
-  immediate?: boolean;
-
-  /**
-   * Lazy mode: don't block navigation (default: false)
-   */
-  lazy?: boolean;
-
-  /**
-   * Server-side rendering mode (default: true)
-   */
-  server?: boolean;
-
-  /**
-   * Deduplicate requests with the same key (default: 'cancel')
-   */
-  dedupe?: 'cancel' | 'defer';
-
-  /**
-   * Disable automatic refresh when reactive params change.
-   * Set to false to prevent re-fetching when params/url refs update.
-   * @default true
-   */
-  watch?: boolean;
-}
+export type ApiAsyncDataOptions<T> = BaseApiRequestOptions<T> &
+  Omit<UseFetchOptions<T>, 'transform' | 'pick' | 'watch'> & {
+    /**
+     * Enable automatic refresh when reactive params/url change (default: true).
+     * Set to false to disable auto-refresh entirely.
+     */
+    watch?: boolean;
+  };
 
 /**
  * Generic wrapper for API calls using Nuxt's useAsyncData
@@ -79,6 +63,8 @@ export function useApiAsyncData<T>(
     body,
     headers = {},
     params,
+    baseURL,
+    cacheKey,
     transform,
     pick,
     onRequest,
@@ -95,7 +81,7 @@ export function useApiAsyncData<T>(
   } = options || {};
 
   // Resolve base URL once at setup time (not inside fetchFn to avoid warning on every request)
-  const resolvedBaseURL = restOptions.baseURL || getGlobalBaseUrl();
+  const resolvedBaseURL = baseURL || getGlobalBaseUrl();
   if (!resolvedBaseURL) {
     console.warn(
       '[nuxt-openapi-hyperfetch] No baseURL configured. Set runtimeConfig.public.apiBaseUrl in nuxt.config.ts or pass baseURL in options.'
@@ -119,6 +105,19 @@ export function useApiAsyncData<T>(
             : []),
         ];
 
+  // Build a reactive cache key: composableName + resolved URL + serialized query params
+  // This ensures distinct params produce distinct keys — preventing cache collisions
+  const computedKey = () => {
+    if (cacheKey) return cacheKey;
+    const resolvedUrl = typeof url === 'function' ? url() : url;
+    const resolvedParams = toValue(params);
+    const paramsSuffix =
+      resolvedParams && typeof resolvedParams === 'object' && Object.keys(resolvedParams).length > 0
+        ? '-' + JSON.stringify(resolvedParams)
+        : '';
+    return `${key}-${resolvedUrl}${paramsSuffix}`;
+  };
+
   // Fetch function for useAsyncData
   const fetchFn = async () => {
     // Get URL value for merging callbacks
@@ -217,13 +216,13 @@ export function useApiAsyncData<T>(
     }
   };
 
-  // Use Nuxt's useAsyncData
-  const result = useAsyncData<MaybeTransformed<T, ApiAsyncDataOptions<T>>>(key, fetchFn, {
+  // Use Nuxt's useAsyncData with a computed key for proper cache isolation per params
+  const result = useAsyncData<MaybeTransformed<T, ApiAsyncDataOptions<T>>>(computedKey, fetchFn, {
     immediate,
     lazy,
     server,
     dedupe,
-    watch: watchSources.length > 0 ? watchSources : undefined,
+    watch: watchOption === false ? [] : watchSources,
   });
 
   return result;

package/src/generators/use-async-data/runtime/useApiAsyncDataRaw.ts

@@ -6,6 +6,7 @@
  * RAW VERSION: Returns full response including headers, status, and statusText
  */
 import { watch } from 'vue';
+import type { UseFetchOptions } from '#app';
 import {
   getGlobalHeaders,
   getGlobalBaseUrl,
@@ -40,37 +41,20 @@ type MaybeTransformedRaw<T, Options> = Options extends { transform: (...args: an
     : RawResponse<T>;
 
 /**
- * Extended options specific to useAsyncData Raw version
+ * Options for useAsyncData Raw API requests.
+ * Extends all native Nuxt useFetch options plus our custom callbacks, transform, and pick.
+ * onSuccess receives data AND the full response (headers, status, statusText).
  */
-export interface ApiAsyncDataRawOptions<T> extends Omit<BaseApiRequestOptions<T>, 'onSuccess'> {
-  /**
-   * Success callback that receives both data and full response
-   */
-  onSuccess?: (
-    data: T,
-    response: { headers: Headers; status: number; statusText: string; url: string }
-  ) => void | Promise<void>;
-
-  /**
-   * Whether to fetch data immediately on mount (default: true)
-   */
-  immediate?: boolean;
-
-  /**
-   * Lazy mode: don't block navigation (default: false)
-   */
-  lazy?: boolean;
-
-  /**
-   * Server-side rendering mode (default: true)
-   */
-  server?: boolean;
-
-  /**
-   * Deduplicate requests with the same key (default: 'cancel')
-   */
-  dedupe?: 'cancel' | 'defer';
-}
+export type ApiAsyncDataRawOptions<T> = Omit<BaseApiRequestOptions<T>, 'onSuccess'> &
+  Omit<UseFetchOptions<T>, 'transform' | 'pick' | 'onSuccess'> & {
+    /**
+     * Called when the request succeeds — receives both data and the full response object.
+     */
+    onSuccess?: (
+      data: T,
+      response: { headers: Headers; status: number; statusText: string; url: string }
+    ) => void | Promise<void>;
+  };
 
 /**
  * Generic wrapper for API calls using Nuxt's useAsyncData - RAW VERSION
@@ -94,6 +78,8 @@ export function useApiAsyncDataRaw<T>(
     body,
     headers = {},
     params,
+    baseURL,
+    cacheKey,
     transform,
     pick,
     onRequest,
@@ -109,7 +95,7 @@ export function useApiAsyncDataRaw<T>(
   } = options || {};
 
   // Resolve base URL once at setup time (not inside fetchFn to avoid warning on every request)
-  const resolvedBaseURL = restOptions.baseURL || getGlobalBaseUrl();
+  const resolvedBaseURL = baseURL || getGlobalBaseUrl();
   if (!resolvedBaseURL) {
     console.warn(
       '[nuxt-openapi-hyperfetch] No baseURL configured. Set runtimeConfig.public.apiBaseUrl in nuxt.config.ts or pass baseURL in options.'
@@ -123,6 +109,19 @@ export function useApiAsyncDataRaw<T>(
     ...(params && typeof params === 'object' ? [() => params] : []),
   ];
 
+  // Build a reactive cache key: composableName + resolved URL + serialized query params
+  // This ensures distinct params produce distinct keys — preventing cache collisions
+  const computedKey = () => {
+    if (cacheKey) return cacheKey;
+    const resolvedUrl = typeof url === 'function' ? url() : url;
+    const resolvedParams = toValue(params);
+    const paramsSuffix =
+      resolvedParams && typeof resolvedParams === 'object' && Object.keys(resolvedParams).length > 0
+        ? '-' + JSON.stringify(resolvedParams)
+        : '';
+    return `${key}-${resolvedUrl}${paramsSuffix}`;
+  };
+
   // Fetch function for useAsyncData
   const fetchFn = async (): Promise<RawResponse<T>> => {
     // Get URL value for merging callbacks
@@ -233,8 +232,8 @@ export function useApiAsyncDataRaw<T>(
     }
   };
 
-  // Use Nuxt's useAsyncData
-  const result = useAsyncData<MaybeTransformedRaw<T, ApiAsyncDataRawOptions<T>>>(key, fetchFn, {
+  // Use Nuxt's useAsyncData with a computed key for proper cache isolation per params
+  const result = useAsyncData<MaybeTransformedRaw<T, ApiAsyncDataRawOptions<T>>>(computedKey, fetchFn, {
     immediate,
     lazy,
     server,

package/src/generators/use-async-data/templates.ts

@@ -165,7 +165,14 @@ function generateFunctionBody(
 
   const pInit = hasParams ? `\n  const p = shallowRef(params)` : '';
 
-  return `${description}export const ${composableName} = (${args}) => {${pInit}
+  const argsExtraction = hasParams
+    ? `  const _hasKey = typeof args[0] === 'string'\n  const params = _hasKey ? args[1] : args[0]\n  const options = _hasKey ? { cacheKey: args[0], ...args[2] } : args[1]`
+    : `  const _hasKey = typeof args[0] === 'string'\n  const options = _hasKey ? { cacheKey: args[0], ...args[1] } : args[0]`;
+
+  return `${description}export function ${composableName}(key: string, ${args})
+export function ${composableName}(${args})
+export function ${composableName}(...args: any[]) {
+${argsExtraction}${pInit}
   return ${wrapperFunction}${responseTypeGeneric}(${key}, ${url}, ${fetchOptions})
 }`;
 }

package/src/generators/use-fetch/runtime/useApiRequest.ts

@@ -4,6 +4,7 @@
  * It requires Nuxt 3 to be installed in the target project
  */
 import { watch } from 'vue';
+import type { UseFetchOptions } from '#app';
 import {
   getGlobalHeaders,
   getGlobalBaseUrl,
@@ -29,13 +30,11 @@ type MaybeTransformed<T, Options> = Options extends { transform: (...args: any)
     : T;
 
 /**
- * Options for useFetch API requests with lifecycle callbacks
- * Extends base options with useFetch-specific options
+ * Options for useFetch API requests with lifecycle callbacks.
+ * Extends all native Nuxt useFetch options plus our custom callbacks, transform, and pick.
+ * Native options like baseURL, method, body, headers, query, lazy, server, immediate, etc. are all available.
  */
-export interface ApiRequestOptions<T = any> extends BaseApiRequestOptions<T> {
-  /** All standard useFetch options */
-  [key: string]: any;
-}
+export type ApiRequestOptions<T = any> = BaseApiRequestOptions<T> & Omit<UseFetchOptions<T>, 'transform' | 'pick'>;
 
 /**
  * Enhanced useFetch wrapper with lifecycle callbacks and request interception