nuxt-openapi-hyperfetch 0.1.0-alpha.1 → 0.1.4-alpha.1

package/README.md

@@ -106,7 +106,29 @@ api/
         +-- index.ts
 ```
 
-### 3. Use in your Nuxt app
+### 3. Configure the API base URL
+
+Add to `nuxt.config.ts`:
+
+```typescript
+export default defineNuxtConfig({
+  runtimeConfig: {
+    public: {
+      apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || 'https://api.example.com'
+    }
+  }
+})
+```
+
+And in `.env`:
+
+```env
+NUXT_PUBLIC_API_BASE_URL=https://api.example.com
+```
+
+All generated `useFetch` and `useAsyncData` composables will automatically use this as `baseURL`. You can still override it per-composable via `options.baseURL`.
+
+### 4. Use in your Nuxt app
 
 ```vue
 <script setup lang="ts">
@@ -152,12 +174,15 @@ And add it to `nuxt.config.ts`:
 ```typescript
 export default defineNuxtConfig({
   runtimeConfig: {
+    // Private — server-side only (never exposed to the browser)
     apiBaseUrl: process.env.API_BASE_URL || '',
     apiSecret: process.env.API_SECRET || '',
   },
 });
 ```
 
+> **Note:** `runtimeConfig.apiBaseUrl` (private) is only for **Server Routes**. For `useFetch`/`useAsyncData` composables use `runtimeConfig.public.apiBaseUrl` instead — see the [Quick Start](#-quick-start) section above.
+
 Then use standard `useFetch` against your Nuxt routes:
 
 ```typescript

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

@@ -141,6 +141,11 @@ export declare function getGlobalHeaders(): Record<string, string>;
  * Uses Nuxt plugin provide: plugins/api-callbacks.ts with $getGlobalApiCallbacks
  */
 export declare function getGlobalCallbacks(): GlobalCallbacksConfig;
+/**
+ * Helper function to get the global base URL from runtimeConfig.public.apiBaseUrl
+ * Returns the configured URL or undefined if not set or not in a Nuxt context.
+ */
+export declare function getGlobalBaseUrl(): string | undefined;
 /**
  * Check if a global callback should be applied to a specific request
  * Implements Opción 1 (skipGlobalCallbacks) and Opción 3 (pattern matching)

package/dist/generators/shared/runtime/apiHelpers.js

@@ -121,6 +121,21 @@ export function getGlobalCallbacks() {
     }
     return {};
 }
+/**
+ * Helper function to get the global base URL from runtimeConfig.public.apiBaseUrl
+ * Returns the configured URL or undefined if not set or not in a Nuxt context.
+ */
+export function getGlobalBaseUrl() {
+    try {
+        const runtimeConfig = useRuntimeConfig();
+        const url = runtimeConfig?.public?.apiBaseUrl;
+        return url || undefined;
+    }
+    catch {
+        // useRuntimeConfig not available outside Nuxt context, that's OK
+        return undefined;
+    }
+}
 /**
  * Check if a global callback should be applied to a specific request
  * Implements Opción 1 (skipGlobalCallbacks) and Opción 3 (pattern matching)

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

@@ -43,7 +43,7 @@ export async function generateUseAsyncDataComposables(inputDir, outputDir, optio
     mainSpinner.start('Preparing output directories');
     const composablesDir = path.join(outputDir, 'composables');
     const runtimeDir = path.join(outputDir, 'runtime');
-    const sharedRuntimeDir = path.join(outputDir, 'shared', 'runtime');
+    const sharedRuntimeDir = path.join(path.dirname(outputDir), 'shared', 'runtime');
     await fs.emptyDir(composablesDir);
     await fs.ensureDir(runtimeDir);
     await fs.ensureDir(sharedRuntimeDir);

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

@@ -1,4 +1,4 @@
-import { getGlobalHeaders, applyPick, mergeCallbacks, } from '../../shared/runtime/apiHelpers.js';
+import { getGlobalHeaders, getGlobalBaseUrl, applyPick, mergeCallbacks, } from '../../shared/runtime/apiHelpers.js';
 /**
  * Generic wrapper for API calls using Nuxt's useAsyncData
  * Supports:
@@ -10,6 +10,11 @@ import { getGlobalHeaders, applyPick, mergeCallbacks, } from '../../shared/runti
  */
 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 || {};
+    // Resolve base URL once at setup time (not inside fetchFn to avoid warning on every request)
+    const resolvedBaseURL = restOptions.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.');
+    }
     // Create reactive watch sources — use refs/computeds directly so Vue can track them
     // watchOption: false disables auto-refresh entirely
     const watchSources = watchOption === false
@@ -72,6 +77,7 @@ export function useApiAsyncData(key, url, options) {
                 headers: modifiedContext.headers,
                 body: toValue(modifiedContext.body),
                 params: toValue(modifiedContext.params),
+                ...(resolvedBaseURL ? { baseURL: resolvedBaseURL } : {}),
                 ...restOptions,
             });
             // Apply pick if provided

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

@@ -1,4 +1,4 @@
-import { getGlobalHeaders, applyPick, mergeCallbacks, } from '../../shared/runtime/apiHelpers.js';
+import { getGlobalHeaders, getGlobalBaseUrl, applyPick, mergeCallbacks, } from '../../shared/runtime/apiHelpers.js';
 /**
  * Generic wrapper for API calls using Nuxt's useAsyncData - RAW VERSION
  * Returns full response with headers and status information
@@ -13,6 +13,11 @@ import { getGlobalHeaders, applyPick, mergeCallbacks, } from '../../shared/runti
  */
 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 || {};
+    // Resolve base URL once at setup time (not inside fetchFn to avoid warning on every request)
+    const resolvedBaseURL = restOptions.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.');
+    }
     // Create reactive watch sources for callbacks
     const watchSources = [
         ...(typeof url === 'function' ? [url] : []),
@@ -66,6 +71,7 @@ export function useApiAsyncDataRaw(key, url, options) {
                 headers: modifiedContext.headers,
                 body: modifiedContext.body,
                 params: modifiedContext.params,
+                ...(resolvedBaseURL ? { baseURL: resolvedBaseURL } : {}),
                 ...restOptions,
             });
             // Extract data from response

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

@@ -97,7 +97,7 @@ function generateImports(method, apiImportPath, isRaw) {
  */
 function generateFunctionBody(method, isRaw, generateOptions) {
     const hasParams = !!method.requestType;
-    const paramsArg = hasParams ? `params: MaybeRef<${method.requestType}>` : '';
+    const paramsArg = hasParams ? `params: ${method.requestType}` : '';
     // Determine the options type based on isRaw
     const optionsType = isRaw
         ? `ApiAsyncDataRawOptions<${method.responseType}>`
@@ -116,7 +116,7 @@ function generateFunctionBody(method, isRaw, generateOptions) {
     const description = method.description ? `/**\n * ${method.description}\n */\n` : '';
     // Choose the correct wrapper function
     const wrapperFunction = isRaw ? 'useApiAsyncDataRaw' : 'useApiAsyncData';
-    const pInit = hasParams ? `\n  const p = isRef(params) ? params : shallowRef(params)` : '';
+    const pInit = hasParams ? `\n  const p = shallowRef(params)` : '';
     return `${description}export const ${composableName} = (${args}) => {${pInit}
   return ${wrapperFunction}${responseTypeGeneric}(${key}, ${url}, ${fetchOptions})
 }`;

package/dist/generators/use-fetch/generator.js

@@ -43,7 +43,7 @@ export async function generateUseFetchComposables(inputDir, outputDir, options)
     mainSpinner.start('Preparing output directories');
     const composablesDir = path.join(outputDir, 'composables');
     const runtimeDir = path.join(outputDir, 'runtime');
-    const sharedRuntimeDir = path.join(outputDir, 'shared', 'runtime');
+    const sharedRuntimeDir = path.join(path.dirname(outputDir), 'shared', 'runtime');
     await fs.emptyDir(composablesDir);
     await fs.ensureDir(runtimeDir);
     await fs.ensureDir(sharedRuntimeDir);

package/dist/generators/use-fetch/runtime/useApiRequest.js

@@ -4,7 +4,7 @@
  * It requires Nuxt 3 to be installed in the target project
  */
 import { watch } from 'vue';
-import { getGlobalHeaders, applyPick, applyRequestModifications, mergeCallbacks, } from '../../shared/runtime/apiHelpers.js';
+import { getGlobalHeaders, getGlobalBaseUrl, applyPick, applyRequestModifications, mergeCallbacks, } from '../../shared/runtime/apiHelpers.js';
 /**
  * Enhanced useFetch wrapper with lifecycle callbacks and request interception
  *
@@ -63,6 +63,13 @@ export function useApiRequest(url, options) {
             ...modifiedOptions.headers, // User headers override global headers
         };
     }
+    // Apply global base URL from runtimeConfig.public.apiBaseUrl (if not already set per-composable)
+    if (!modifiedOptions.baseURL) {
+        modifiedOptions.baseURL = getGlobalBaseUrl();
+    }
+    if (!modifiedOptions.baseURL) {
+        console.warn('[nuxt-openapi-hyperfetch] No baseURL configured. Set runtimeConfig.public.apiBaseUrl in nuxt.config.ts or pass baseURL in options.');
+    }
     // Execute merged onRequest interceptor and apply modifications
     if (mergedCallbacks.onRequest) {
         try {
@@ -95,7 +102,8 @@ export function useApiRequest(url, options) {
     let successExecuted = false;
     let errorExecuted = false;
     // Watch for changes in data, error, and pending states
-    watch(() => [result.data.value, result.error.value, result.pending.value], async ([data, error, pending], [prevData, prevError, prevPending]) => {
+    watch(() => [result.data.value, result.error.value, result.pending.value], async ([data, error, pending], prev) => {
+        const [prevData, prevError, prevPending] = prev ?? [undefined, undefined, undefined];
         // Apply transformations when data arrives
         if (data && data !== prevData) {
             let processedData = data;

package/dist/generators/use-fetch/templates.js

@@ -86,7 +86,7 @@ function generateImports(method, apiImportPath) {
  */
 function generateFunctionBody(method, options) {
     const hasParams = !!method.requestType;
-    const paramsArg = hasParams ? `params: MaybeRef<${method.requestType}>` : '';
+    const paramsArg = hasParams ? `params: ${method.requestType}` : '';
     const optionsType = `ApiRequestOptions<${method.responseType}>`;
     const optionsArg = `options?: ${optionsType}`;
     const args = hasParams ? `${paramsArg}, ${optionsArg}` : optionsArg;
@@ -94,7 +94,7 @@ function generateFunctionBody(method, options) {
     const url = generateUrl(method);
     const fetchOptions = generateFetchOptions(method, options);
     const description = method.description ? `/**\n * ${method.description}\n */\n` : '';
-    const pInit = hasParams ? `\n  const p = isRef(params) ? params : shallowRef(params)` : '';
+    const pInit = hasParams ? `\n  const p = shallowRef(params)` : '';
     return `${description}export const ${method.composableName} = (${args}) => {${pInit}
   return useApiRequest${responseTypeGeneric}(${url}, ${fetchOptions})
 }`;

package/package.json

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

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

@@ -280,6 +280,21 @@ export function getGlobalCallbacks(): GlobalCallbacksConfig {
   return {};
 }
 
+/**
+ * Helper function to get the global base URL from runtimeConfig.public.apiBaseUrl
+ * Returns the configured URL or undefined if not set or not in a Nuxt context.
+ */
+export function getGlobalBaseUrl(): string | undefined {
+  try {
+    const runtimeConfig = useRuntimeConfig();
+    const url = runtimeConfig?.public?.apiBaseUrl as string | undefined;
+    return url || undefined;
+  } catch {
+    // useRuntimeConfig not available outside Nuxt context, that's OK
+    return undefined;
+  }
+}
+
 /**
  * Check if a global callback should be applied to a specific request
  * Implements Opción 1 (skipGlobalCallbacks) and Opción 3 (pattern matching)

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

@@ -67,7 +67,7 @@ export async function generateUseAsyncDataComposables(
   mainSpinner.start('Preparing output directories');
   const composablesDir = path.join(outputDir, 'composables');
   const runtimeDir = path.join(outputDir, 'runtime');
-  const sharedRuntimeDir = path.join(outputDir, 'shared', 'runtime');
+  const sharedRuntimeDir = path.join(path.dirname(outputDir), 'shared', 'runtime');
   await fs.emptyDir(composablesDir);
   await fs.ensureDir(runtimeDir);
   await fs.ensureDir(sharedRuntimeDir);

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

@@ -6,6 +6,7 @@
 import { watch } from 'vue';
 import {
   getGlobalHeaders,
+  getGlobalBaseUrl,
   applyPick,
   applyRequestModifications,
   mergeCallbacks,
@@ -93,6 +94,14 @@ export function useApiAsyncData<T>(
     ...restOptions
   } = options || {};
 
+  // Resolve base URL once at setup time (not inside fetchFn to avoid warning on every request)
+  const resolvedBaseURL = restOptions.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.'
+    );
+  }
+
   // Create reactive watch sources — use refs/computeds directly so Vue can track them
   // watchOption: false disables auto-refresh entirely
   const watchSources =
@@ -166,6 +175,7 @@ export function useApiAsyncData<T>(
         headers: modifiedContext.headers,
         body: toValue(modifiedContext.body),
         params: toValue(modifiedContext.params),
+        ...(resolvedBaseURL ? { baseURL: resolvedBaseURL } : {}),
         ...restOptions,
       });
 

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

@@ -8,6 +8,7 @@
 import { watch } from 'vue';
 import {
   getGlobalHeaders,
+  getGlobalBaseUrl,
   applyPick,
   applyRequestModifications,
   mergeCallbacks,
@@ -107,6 +108,14 @@ export function useApiAsyncDataRaw<T>(
     ...restOptions
   } = options || {};
 
+  // Resolve base URL once at setup time (not inside fetchFn to avoid warning on every request)
+  const resolvedBaseURL = restOptions.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.'
+    );
+  }
+
   // Create reactive watch sources for callbacks
   const watchSources = [
     ...(typeof url === 'function' ? [url] : []),
@@ -170,6 +179,7 @@ export function useApiAsyncDataRaw<T>(
         headers: modifiedContext.headers,
         body: modifiedContext.body,
         params: modifiedContext.params,
+        ...(resolvedBaseURL ? { baseURL: resolvedBaseURL } : {}),
         ...restOptions,
       });
 

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

@@ -135,7 +135,7 @@ function generateFunctionBody(
   generateOptions?: GenerateOptions
 ): string {
   const hasParams = !!method.requestType;
-  const paramsArg = hasParams ? `params: MaybeRef<${method.requestType}>` : '';
+  const paramsArg = hasParams ? `params: ${method.requestType}` : '';
 
   // Determine the options type based on isRaw
   const optionsType = isRaw
@@ -163,7 +163,7 @@ function generateFunctionBody(
   // Choose the correct wrapper function
   const wrapperFunction = isRaw ? 'useApiAsyncDataRaw' : 'useApiAsyncData';
 
-  const pInit = hasParams ? `\n  const p = isRef(params) ? params : shallowRef(params)` : '';
+  const pInit = hasParams ? `\n  const p = shallowRef(params)` : '';
 
   return `${description}export const ${composableName} = (${args}) => {${pInit}
   return ${wrapperFunction}${responseTypeGeneric}(${key}, ${url}, ${fetchOptions})

package/src/generators/use-fetch/generator.ts

@@ -62,7 +62,7 @@ export async function generateUseFetchComposables(
   mainSpinner.start('Preparing output directories');
   const composablesDir = path.join(outputDir, 'composables');
   const runtimeDir = path.join(outputDir, 'runtime');
-  const sharedRuntimeDir = path.join(outputDir, 'shared', 'runtime');
+  const sharedRuntimeDir = path.join(path.dirname(outputDir), 'shared', 'runtime');
   await fs.emptyDir(composablesDir);
   await fs.ensureDir(runtimeDir);
   await fs.ensureDir(sharedRuntimeDir);

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

@@ -6,6 +6,7 @@
 import { watch } from 'vue';
 import {
   getGlobalHeaders,
+  getGlobalBaseUrl,
   applyPick,
   applyRequestModifications,
   mergeCallbacks,
@@ -114,6 +115,16 @@ export function useApiRequest<T = any, Options extends ApiRequestOptions<T> = Ap
     };
   }
 
+  // Apply global base URL from runtimeConfig.public.apiBaseUrl (if not already set per-composable)
+  if (!modifiedOptions.baseURL) {
+    modifiedOptions.baseURL = getGlobalBaseUrl();
+  }
+  if (!modifiedOptions.baseURL) {
+    console.warn(
+      '[nuxt-openapi-hyperfetch] No baseURL configured. Set runtimeConfig.public.apiBaseUrl in nuxt.config.ts or pass baseURL in options.'
+    );
+  }
+
   // Execute merged onRequest interceptor and apply modifications
   if (mergedCallbacks.onRequest) {
     try {
@@ -154,7 +165,8 @@ export function useApiRequest<T = any, Options extends ApiRequestOptions<T> = Ap
   // Watch for changes in data, error, and pending states
   watch(
     () => [result.data.value, result.error.value, result.pending.value] as const,
-    async ([data, error, pending], [prevData, prevError, prevPending]) => {
+    async ([data, error, pending], prev) => {
+      const [prevData, prevError, prevPending] = prev ?? [undefined, undefined, undefined];
       // Apply transformations when data arrives
       if (data && data !== prevData) {
         let processedData: any = data;

package/src/generators/use-fetch/templates.ts

@@ -115,7 +115,7 @@ function generateImports(method: MethodInfo, apiImportPath: string): string {
  */
 function generateFunctionBody(method: MethodInfo, options?: GenerateOptions): string {
   const hasParams = !!method.requestType;
-  const paramsArg = hasParams ? `params: MaybeRef<${method.requestType}>` : '';
+  const paramsArg = hasParams ? `params: ${method.requestType}` : '';
   const optionsType = `ApiRequestOptions<${method.responseType}>`;
   const optionsArg = `options?: ${optionsType}`;
   const args = hasParams ? `${paramsArg}, ${optionsArg}` : optionsArg;
@@ -127,7 +127,7 @@ function generateFunctionBody(method: MethodInfo, options?: GenerateOptions): st
 
   const description = method.description ? `/**\n * ${method.description}\n */\n` : '';
 
-  const pInit = hasParams ? `\n  const p = isRef(params) ? params : shallowRef(params)` : '';
+  const pInit = hasParams ? `\n  const p = shallowRef(params)` : '';
 
   return `${description}export const ${method.composableName} = (${args}) => {${pInit}
   return useApiRequest${responseTypeGeneric}(${url}, ${fetchOptions})