nuxt-openapi-hyperfetch 0.2.8-alpha.1 → 0.3.0-beta

package/README.md

@@ -1,4 +1,8 @@
-# 🚀 Nuxt OpenAPI Generator
+<p align="center">
+  <img src="./public/nuxt-openapi-hyperfetch-logo.png" alt="Nuxt OpenAPI Hyperfetch logo" width="260" />
+</p>
+
+# 🚀 Nuxt OpenAPI Generator
 
 **Generate type-safe, SSR-compatible Nuxt composables from OpenAPI/Swagger specifications.**
 
@@ -6,7 +10,7 @@
 
 ---
 
-Transform your API documentation into production-ready **100% Nuxt-native** code—`useFetch` composables, `useAsyncData` composables, and Nuxt Server Routes—with full TypeScript support, lifecycle callbacks, and request interception. No third-party runtime, no wrappers: just Nuxt.
+Transform your API documentation into production-ready **100% Nuxt-native** code—`useFetch` composables, `useAsyncData` composables, and Nuxt Server Routes—with full TypeScript support, lifecycle callbacks, and request interception. Use it either as a CLI with `nxh generate` or as a Nuxt module wired directly from `nuxt.config.ts`.
 
 ---
 
@@ -52,6 +56,8 @@ export default {
 
 ## 📦 Installation
 
+### Use as CLI
+
 ```bash
 npm install -g nuxt-openapi-hyperfetch
 # or
@@ -66,11 +72,49 @@ Or use directly with npx:
 npx nuxt-openapi-hyperfetch generate
 ```
 
+### Use as Nuxt module
+
+Install it in your Nuxt project:
+
+```bash
+npm install -D nuxt-openapi-hyperfetch
+# or
+pnpm add -D nuxt-openapi-hyperfetch
+# or
+yarn add -D nuxt-openapi-hyperfetch
+```
+
+Then register the module in `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['nuxt-openapi-hyperfetch'],
+
+  openApiHyperFetch: {
+    input: './swagger.yaml',
+    output: './composables/api',
+    generators: ['useFetch', 'useAsyncData'],
+    backend: 'heyapi',
+    enableDevBuild: true,
+    enableProductionBuild: true,
+    enableAutoGeneration: false,
+    enableAutoImport: true,
+    createUseAsyncDataConnectors: false,
+  },
+})
+```
+
+The module uses `openApiHyperFetch` as its Nuxt config key and runs generation during Nuxt build hooks. If you include `nuxtServer` in `generators`, you can also configure `serverRoutePath` and `enableBff` here.
+
 ---
 
 ## 🚀 Quick Start
 
-### 1. Run the generator
+### 1. Run the generator with the CLI
+
+<p align="center">
+  <img src="./public/nuxt-openapi-hyperfetch-cli.png" alt="Nuxt OpenAPI Hyperfetch CLI" width="720" />
+</p>
 
 ```bash
 nxh generate
@@ -89,7 +133,41 @@ Or pass arguments directly:
 nxh generate -i ./swagger.yaml -o ./api
 ```
 
-### 2. Generated output
+### 2. Or generate through the Nuxt module
+
+If you prefer generation to run from Nuxt itself, add the module and configure it in `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['nuxt-openapi-hyperfetch'],
+
+  openApiHyperFetch: {
+    input: './swagger.yaml',
+    output: './composables/api',
+    generators: ['useFetch', 'useAsyncData', 'nuxtServer'],
+    backend: 'heyapi',
+    serverRoutePath: 'server/routes/api',
+    enableBff: false,
+    enableAutoImport: true,
+    enableAutoGeneration: true,
+  },
+})
+```
+
+Useful module options:
+
+- `input`: OpenAPI file path relative to the Nuxt root.
+- `output`: Directory where the generated SDK/composables are written.
+- `generators`: Any combination of `useFetch`, `useAsyncData`, and `nuxtServer`.
+- `backend`: `heyapi` or `official`.
+- `enableDevBuild` / `enableProductionBuild`: Control generation before dev/build.
+- `enableAutoGeneration`: Regenerate when the input spec changes in dev mode.
+- `enableAutoImport`: Auto-register generated composables for Nuxt auto-imports.
+- `createUseAsyncDataConnectors`: Generate headless connectors on top of `useAsyncData`.
+- `serverRoutePath`: Output path for generated Nuxt server routes.
+- `enableBff`: Enable the BFF transformer layer for server routes.
+
+### 3. Generated output
 
 ```
 api/
@@ -110,7 +188,7 @@ api/
         +-- index.ts
 ```
 
-### 3. Configure the API base URL
+### 4. Configure the API base URL
 
 Add to `nuxt.config.ts`:
 
@@ -132,7 +210,7 @@ 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
+### 5. Use in your Nuxt app
 
 ```vue
 <script setup lang="ts">

package/dist/generators/components/connector-generator/templates.js

@@ -103,19 +103,59 @@ function buildZodSchemas(resource) {
     }
     return lines.join('\n');
 }
+/**
+ * Build a const array with the column definitions inferred from the resource.
+ * Returns an empty string if the resource has no columns.
+ */
+function buildColumns(resource) {
+    if (!resource.columns || resource.columns.length === 0) {
+        return '';
+    }
+    const camel = resource.composableName
+        .replace(/^use/, '')
+        .replace(/Connector$/, '')
+        .replace(/^./, (c) => c.toLowerCase());
+    const varName = `${camel}Columns`;
+    const entries = resource.columns
+        .map((col) => `  { key: '${col.key}', label: '${col.label}', type: '${col.type}' }`)
+        .join(',\n');
+    return `const ${varName} = [\n${entries},\n];`;
+}
 /**
  * Build the body of the exported connector function.
  */
 function buildFunctionBody(resource) {
     const pascal = pascalCase(resource.name);
+    const hasColumns = resource.columns && resource.columns.length > 0;
+    const camel = resource.composableName
+        .replace(/^use/, '')
+        .replace(/Connector$/, '')
+        .replace(/^./, (c) => c.toLowerCase());
+    const columnsVar = `${camel}Columns`;
     const subConnectors = [];
+    // Destructure options param — only what's relevant for this resource
+    const optionKeys = [];
+    if (resource.listEndpoint && hasColumns) {
+        optionKeys.push('columnLabels', 'columnLabel');
+    }
+    if (resource.createEndpoint && resource.zodSchemas.create) {
+        optionKeys.push('createSchema');
+    }
+    if (resource.updateEndpoint && resource.zodSchemas.update) {
+        optionKeys.push('updateSchema');
+    }
+    const optionsDestructure = optionKeys.length > 0 ? `  const { ${optionKeys.join(', ')} } = options;\n` : '';
     if (resource.listEndpoint) {
         const fn = toAsyncDataName(resource.listEndpoint.operationId);
         // paginated: true tells useListConnector to expose pagination helpers
         // (goToPage, nextPage, prevPage, setPerPage, pagination ref).
         // We set it whenever the spec declares a list endpoint that has a response schema,
         // which is a reliable proxy for "this API returns structured data worth paginating".
-        const opts = resource.listEndpoint.responseSchema ? '{ paginated: true }' : '{}';
+        const paginatedFlag = resource.listEndpoint.responseSchema ? 'paginated: true' : '';
+        const columnsArg = hasColumns ? `columns: ${columnsVar}` : '';
+        const labelArgs = hasColumns ? 'columnLabels, columnLabel' : '';
+        const allArgs = [paginatedFlag, columnsArg, labelArgs].filter(Boolean).join(', ');
+        const opts = allArgs ? `{ ${allArgs} }` : '{}';
         subConnectors.push(`  const table = useListConnector(${fn}, ${opts});`);
     }
     if (resource.detailEndpoint) {
@@ -124,7 +164,9 @@ function buildFunctionBody(resource) {
     }
     if (resource.createEndpoint) {
         const fn = toAsyncDataName(resource.createEndpoint.operationId);
-        const schemaArg = resource.zodSchemas.create ? `{ schema: ${pascal}CreateSchema }` : '{}';
+        const schemaArg = resource.zodSchemas.create
+            ? `{ schema: ${pascal}CreateSchema, schemaOverride: createSchema }`
+            : '{}';
         subConnectors.push(`  const createForm = useFormConnector(${fn}, ${schemaArg});`);
     }
     if (resource.updateEndpoint) {
@@ -139,11 +181,11 @@ function buildFunctionBody(resource) {
         let schemaArg = '{}';
         if (resource.zodSchemas.update && hasDetail) {
             // Best case: validate AND pre-fill from detail
-            schemaArg = `{ schema: ${pascal}UpdateSchema, loadWith: detail }`;
+            schemaArg = `{ schema: ${pascal}UpdateSchema, schemaOverride: updateSchema, loadWith: detail }`;
         }
         else if (resource.zodSchemas.update) {
             // Validate, but no detail endpoint to pre-fill from
-            schemaArg = `{ schema: ${pascal}UpdateSchema }`;
+            schemaArg = `{ schema: ${pascal}UpdateSchema, schemaOverride: updateSchema }`;
         }
         else if (hasDetail) {
             // No Zod schema (no request body in spec), but still pre-fill from detail
@@ -174,11 +216,14 @@ function buildFunctionBody(resource) {
     }
     const returnStatement = `  return { ${returnKeys.join(', ')} };`;
     return [
-        `export function ${resource.composableName}() {`,
+        `export function ${resource.composableName}(options = {}) {`,
+        optionsDestructure.trimEnd(),
         ...subConnectors,
         returnStatement,
         `}`,
-    ].join('\n');
+    ]
+        .filter((s) => s !== '')
+        .join('\n');
 }
 // ─── Public API ───────────────────────────────────────────────────────────────
 /**
@@ -192,14 +237,18 @@ export function generateConnectorFile(resource, composablesRelDir) {
     const header = generateFileHeader();
     const imports = buildImports(resource, composablesRelDir);
     const schemas = buildZodSchemas(resource);
+    const columns = buildColumns(resource);
     const fn = buildFunctionBody(resource);
-    // Assemble file: header + imports + (optional) Zod blocks + function body.
+    // Assemble file: header + imports + (optional) Zod blocks + columns const + function body.
     // Each section ends with its own trailing newline; join with \n adds one blank
     // line between sections, which matches Prettier's output for this structure.
     const parts = [header, imports];
     if (schemas.trim()) {
         parts.push(schemas);
     }
+    if (columns.trim()) {
+        parts.push(columns);
+    }
     parts.push(fn);
     return parts.join('\n') + '\n';
 }

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

@@ -18,7 +18,14 @@ import { mergeZodErrors } from './zod-error-merger.js';
  * @param options        { schema, fields, loadWith?, errorConfig? }
  */
 export function useFormConnector(composableFn, options = {}) {
-    const { schema, fields = [], loadWith = null, errorConfig = {} } = options;
+    const { schema: baseSchema, schemaOverride, fields = [], loadWith = null, errorConfig = {} } = options;
+    // Resolve the active schema:
+    //   schemaOverride(base) — extend or refine the generated schema
+    //   schemaOverride        — replace the generated schema entirely
+    //   baseSchema            — the generated schema unchanged (default)
+    const schema = schemaOverride
+        ? (typeof schemaOverride === 'function' ? schemaOverride(baseSchema) : schemaOverride)
+        : baseSchema;
     // ── Form state ─────────────────────────────────────────────────────────────
     const model = ref({});
     const errors = ref({});

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

@@ -16,7 +16,7 @@ import { ref, computed, shallowRef } from 'vue';
  * @param options       Configuration for the list connector
  */
 export function useListConnector(composableFn, options = {}) {
-    const { paginated = false, columns = [] } = options;
+    const { paginated = false, columns = [], columnLabels = {}, columnLabel = null } = options;
     // ── Execute the underlying composable ──────────────────────────────────────
     const composable = composableFn({ paginated });
     // ── Derived state ──────────────────────────────────────────────────────────
@@ -36,16 +36,16 @@ export function useListConnector(composableFn, options = {}) {
     // Pagination — passthrough from the underlying composable when paginated: true
     const pagination = computed(() => composable.pagination?.value ?? null);
     function goToPage(page) {
-        composable.goToPage?.(page);
+        composable.pagination?.value?.goToPage?.(page);
     }
     function nextPage() {
-        composable.nextPage?.();
+        composable.pagination?.value?.nextPage?.();
     }
     function prevPage() {
-        composable.prevPage?.();
+        composable.pagination?.value?.prevPage?.();
     }
     function setPerPage(n) {
-        composable.setPerPage?.(n);
+        composable.pagination?.value?.setPerPage?.(n);
     }
     // ── Row selection ──────────────────────────────────────────────────────────
     const selected = ref([]);
@@ -95,10 +95,17 @@ export function useListConnector(composableFn, options = {}) {
     function remove(row) {
         _deleteTarget.value = row;
     }
+    // Apply label overrides: columnLabel function takes priority over columnLabels map
+    const resolvedColumns = computed(() => columns.map((col) => ({
+        ...col,
+        label: columnLabel
+            ? columnLabel(col.key)
+            : (columnLabels[col.key] ?? col.label),
+    })));
     return {
         // State
         rows,
-        columns: computed(() => columns),
+        columns: resolvedColumns,
         loading,
         error,
         // Pagination

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

@@ -66,6 +66,10 @@ export async function generateUseAsyncDataComposables(inputDir, outputDir, optio
     const sharedHelpersSource = path.resolve(__dirname, '../../../src/generators/shared/runtime/apiHelpers.ts');
     const sharedHelpersDest = path.join(sharedRuntimeDir, 'apiHelpers.ts');
     await fs.copyFile(sharedHelpersSource, sharedHelpersDest);
+    // Copy shared pagination.ts
+    const sharedPaginationSource = path.resolve(__dirname, '../../../src/generators/shared/runtime/pagination.ts');
+    const sharedPaginationDest = path.join(sharedRuntimeDir, 'pagination.ts');
+    await fs.copyFile(sharedPaginationSource, sharedPaginationDest);
     mainSpinner.stop('Runtime files copied');
     // 5. Calculate relative import path from composables to APIs
     const relativePath = calculateRelativeImportPath(composablesDir, inputDir);

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

@@ -232,10 +232,10 @@ export function useApiAsyncData(key, url, options) {
             ...paginationState.value,
             hasNextPage: hasNextPage.value,
             hasPrevPage: hasPrevPage.value,
+            goToPage,
+            nextPage,
+            prevPage,
+            setPerPage,
         })),
-        goToPage,
-        nextPage,
-        prevPage,
-        setPerPage,
     };
 }

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

@@ -213,10 +213,10 @@ export function useApiAsyncDataRaw(key, url, options) {
             ...paginationState.value,
             hasNextPage: hasNextPage.value,
             hasPrevPage: hasPrevPage.value,
+            goToPage,
+            nextPage,
+            prevPage,
+            setPerPage,
         })),
-        goToPage,
-        nextPage,
-        prevPage,
-        setPerPage,
     };
 }

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

@@ -62,6 +62,10 @@ export async function generateUseFetchComposables(inputDir, outputDir, options,
     const sharedHelpersSource = path.resolve(__dirname, '../../../src/generators/shared/runtime/apiHelpers.ts');
     const sharedHelpersDest = path.join(sharedRuntimeDir, 'apiHelpers.ts');
     await fs.copyFile(sharedHelpersSource, sharedHelpersDest);
+    // Copy shared pagination.ts
+    const sharedPaginationSource = path.resolve(__dirname, '../../../src/generators/shared/runtime/pagination.ts');
+    const sharedPaginationDest = path.join(sharedRuntimeDir, 'pagination.ts');
+    await fs.copyFile(sharedPaginationSource, sharedPaginationDest);
     mainSpinner.stop('Runtime files copied');
     // 5. Calculate relative import path from composables to APIs
     const relativePath = calculateRelativeImportPath(composablesDir, inputDir);

package/dist/index.js

@@ -55,7 +55,8 @@ program
             backend: options.backend === 'official' || options.backend === 'heyapi'
                 ? options.backend
                 : undefined,
-            createUseAsyncDataConnectors: options.connectors,
+            // Only propagate if explicitly passed — undefined means "ask the user"
+            createUseAsyncDataConnectors: options.connectors === true ? true : undefined,
         });
         if (config.verbose) {
             console.log('Configuration:', config);

package/package.json

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

package/src/generators/components/connector-generator/templates.ts

@@ -122,20 +122,64 @@ function buildZodSchemas(resource: ResourceInfo): string {
   return lines.join('\n');
 }
 
+/**
+ * Build a const array with the column definitions inferred from the resource.
+ * Returns an empty string if the resource has no columns.
+ */
+function buildColumns(resource: ResourceInfo): string {
+  if (!resource.columns || resource.columns.length === 0) {
+    return '';
+  }
+  const camel = resource.composableName
+    .replace(/^use/, '')
+    .replace(/Connector$/, '')
+    .replace(/^./, (c) => c.toLowerCase());
+  const varName = `${camel}Columns`;
+  const entries = resource.columns
+    .map((col) => `  { key: '${col.key}', label: '${col.label}', type: '${col.type}' }`)
+    .join(',\n');
+  return `const ${varName} = [\n${entries},\n];`;
+}
+
 /**
  * Build the body of the exported connector function.
  */
 function buildFunctionBody(resource: ResourceInfo): string {
   const pascal = pascalCase(resource.name);
+  const hasColumns = resource.columns && resource.columns.length > 0;
+  const camel = resource.composableName
+    .replace(/^use/, '')
+    .replace(/Connector$/, '')
+    .replace(/^./, (c) => c.toLowerCase());
+  const columnsVar = `${camel}Columns`;
   const subConnectors: string[] = [];
 
+  // Destructure options param — only what's relevant for this resource
+  const optionKeys: string[] = [];
+  if (resource.listEndpoint && hasColumns) {
+    optionKeys.push('columnLabels', 'columnLabel');
+  }
+  if (resource.createEndpoint && resource.zodSchemas.create) {
+    optionKeys.push('createSchema');
+  }
+  if (resource.updateEndpoint && resource.zodSchemas.update) {
+    optionKeys.push('updateSchema');
+  }
+
+  const optionsDestructure =
+    optionKeys.length > 0 ? `  const { ${optionKeys.join(', ')} } = options;\n` : '';
+
   if (resource.listEndpoint) {
     const fn = toAsyncDataName(resource.listEndpoint.operationId);
     // paginated: true tells useListConnector to expose pagination helpers
     // (goToPage, nextPage, prevPage, setPerPage, pagination ref).
     // We set it whenever the spec declares a list endpoint that has a response schema,
     // which is a reliable proxy for "this API returns structured data worth paginating".
-    const opts = resource.listEndpoint.responseSchema ? '{ paginated: true }' : '{}';
+    const paginatedFlag = resource.listEndpoint.responseSchema ? 'paginated: true' : '';
+    const columnsArg = hasColumns ? `columns: ${columnsVar}` : '';
+    const labelArgs = hasColumns ? 'columnLabels, columnLabel' : '';
+    const allArgs = [paginatedFlag, columnsArg, labelArgs].filter(Boolean).join(', ');
+    const opts = allArgs ? `{ ${allArgs} }` : '{}';
     subConnectors.push(`  const table = useListConnector(${fn}, ${opts});`);
   }
 
@@ -146,7 +190,9 @@ function buildFunctionBody(resource: ResourceInfo): string {
 
   if (resource.createEndpoint) {
     const fn = toAsyncDataName(resource.createEndpoint.operationId);
-    const schemaArg = resource.zodSchemas.create ? `{ schema: ${pascal}CreateSchema }` : '{}';
+    const schemaArg = resource.zodSchemas.create
+      ? `{ schema: ${pascal}CreateSchema, schemaOverride: createSchema }`
+      : '{}';
     subConnectors.push(`  const createForm = useFormConnector(${fn}, ${schemaArg});`);
   }
 
@@ -163,10 +209,10 @@ function buildFunctionBody(resource: ResourceInfo): string {
     let schemaArg = '{}';
     if (resource.zodSchemas.update && hasDetail) {
       // Best case: validate AND pre-fill from detail
-      schemaArg = `{ schema: ${pascal}UpdateSchema, loadWith: detail }`;
+      schemaArg = `{ schema: ${pascal}UpdateSchema, schemaOverride: updateSchema, loadWith: detail }`;
     } else if (resource.zodSchemas.update) {
       // Validate, but no detail endpoint to pre-fill from
-      schemaArg = `{ schema: ${pascal}UpdateSchema }`;
+      schemaArg = `{ schema: ${pascal}UpdateSchema, schemaOverride: updateSchema }`;
     } else if (hasDetail) {
       // No Zod schema (no request body in spec), but still pre-fill from detail
       schemaArg = `{ loadWith: detail }`;
@@ -200,11 +246,14 @@ function buildFunctionBody(resource: ResourceInfo): string {
   const returnStatement = `  return { ${returnKeys.join(', ')} };`;
 
   return [
-    `export function ${resource.composableName}() {`,
+    `export function ${resource.composableName}(options = {}) {`,
+    optionsDestructure.trimEnd(),
     ...subConnectors,
     returnStatement,
     `}`,
-  ].join('\n');
+  ]
+    .filter((s) => s !== '')
+    .join('\n');
 }
 
 // ─── Public API ───────────────────────────────────────────────────────────────
@@ -220,15 +269,19 @@ export function generateConnectorFile(resource: ResourceInfo, composablesRelDir:
   const header = generateFileHeader();
   const imports = buildImports(resource, composablesRelDir);
   const schemas = buildZodSchemas(resource);
+  const columns = buildColumns(resource);
   const fn = buildFunctionBody(resource);
 
-  // Assemble file: header + imports + (optional) Zod blocks + function body.
+  // Assemble file: header + imports + (optional) Zod blocks + columns const + function body.
   // Each section ends with its own trailing newline; join with \n adds one blank
   // line between sections, which matches Prettier's output for this structure.
   const parts: string[] = [header, imports];
   if (schemas.trim()) {
     parts.push(schemas);
   }
+  if (columns.trim()) {
+    parts.push(columns);
+  }
   parts.push(fn);
 
   return parts.join('\n') + '\n';

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

@@ -19,7 +19,15 @@ import { mergeZodErrors } from './zod-error-merger.js';
  * @param options        { schema, fields, loadWith?, errorConfig? }
  */
 export function useFormConnector(composableFn, options = {}) {
-  const { schema, fields = [], loadWith = null, errorConfig = {} } = options;
+  const { schema: baseSchema, schemaOverride, fields = [], loadWith = null, errorConfig = {} } = options;
+
+  // Resolve the active schema:
+  //   schemaOverride(base) — extend or refine the generated schema
+  //   schemaOverride        — replace the generated schema entirely
+  //   baseSchema            — the generated schema unchanged (default)
+  const schema = schemaOverride
+    ? (typeof schemaOverride === 'function' ? schemaOverride(baseSchema) : schemaOverride)
+    : baseSchema;
 
   // ── Form state ─────────────────────────────────────────────────────────────
 

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

@@ -17,7 +17,7 @@ import { ref, computed, shallowRef } from 'vue';
  * @param options       Configuration for the list connector
  */
 export function useListConnector(composableFn, options = {}) {
-  const { paginated = false, columns = [] } = options;
+  const { paginated = false, columns = [], columnLabels = {}, columnLabel = null } = options;
 
   // ── Execute the underlying composable ──────────────────────────────────────
   const composable = composableFn({ paginated });
@@ -40,19 +40,19 @@ export function useListConnector(composableFn, options = {}) {
   const pagination = computed(() => composable.pagination?.value ?? null);
 
   function goToPage(page) {
-    composable.goToPage?.(page);
+    composable.pagination?.value?.goToPage?.(page);
   }
 
   function nextPage() {
-    composable.nextPage?.();
+    composable.pagination?.value?.nextPage?.();
   }
 
   function prevPage() {
-    composable.prevPage?.();
+    composable.pagination?.value?.prevPage?.();
   }
 
   function setPerPage(n) {
-    composable.setPerPage?.(n);
+    composable.pagination?.value?.setPerPage?.(n);
   }
 
   // ── Row selection ──────────────────────────────────────────────────────────
@@ -113,10 +113,20 @@ export function useListConnector(composableFn, options = {}) {
     _deleteTarget.value = row;
   }
 
+  // Apply label overrides: columnLabel function takes priority over columnLabels map
+  const resolvedColumns = computed(() =>
+    columns.map((col) => ({
+      ...col,
+      label: columnLabel
+        ? columnLabel(col.key)
+        : (columnLabels[col.key] ?? col.label),
+    }))
+  );
+
   return {
     // State
     rows,
-    columns: computed(() => columns),
+    columns: resolvedColumns,
     loading,
     error,
 

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

@@ -104,6 +104,14 @@ export async function generateUseAsyncDataComposables(
   );
   const sharedHelpersDest = path.join(sharedRuntimeDir, 'apiHelpers.ts');
   await fs.copyFile(sharedHelpersSource, sharedHelpersDest);
+
+  // Copy shared pagination.ts
+  const sharedPaginationSource = path.resolve(
+    __dirname,
+    '../../../src/generators/shared/runtime/pagination.ts'
+  );
+  const sharedPaginationDest = path.join(sharedRuntimeDir, 'pagination.ts');
+  await fs.copyFile(sharedPaginationSource, sharedPaginationDest);
   mainSpinner.stop('Runtime files copied');
 
   // 5. Calculate relative import path from composables to APIs

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

@@ -320,10 +320,10 @@ export function useApiAsyncData<T>(
       ...paginationState.value,
       hasNextPage: hasNextPage.value,
       hasPrevPage: hasPrevPage.value,
+      goToPage,
+      nextPage,
+      prevPage,
+      setPerPage,
     })),
-    goToPage,
-    nextPage,
-    prevPage,
-    setPerPage,
   };
 }

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

@@ -315,10 +315,10 @@ export function useApiAsyncDataRaw<T>(
       ...paginationState.value,
       hasNextPage: hasNextPage.value,
       hasPrevPage: hasPrevPage.value,
+      goToPage,
+      nextPage,
+      prevPage,
+      setPerPage,
     })),
-    goToPage,
-    nextPage,
-    prevPage,
-    setPerPage,
   };
 }

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

@@ -91,6 +91,14 @@ export async function generateUseFetchComposables(
   );
   const sharedHelpersDest = path.join(sharedRuntimeDir, 'apiHelpers.ts');
   await fs.copyFile(sharedHelpersSource, sharedHelpersDest);
+
+  // Copy shared pagination.ts
+  const sharedPaginationSource = path.resolve(
+    __dirname,
+    '../../../src/generators/shared/runtime/pagination.ts'
+  );
+  const sharedPaginationDest = path.join(sharedRuntimeDir, 'pagination.ts');
+  await fs.copyFile(sharedPaginationSource, sharedPaginationDest);
   mainSpinner.stop('Runtime files copied');
 
   // 5. Calculate relative import path from composables to APIs

package/src/index.ts

@@ -87,7 +87,8 @@ program
           options.backend === 'official' || options.backend === 'heyapi'
             ? options.backend
             : undefined,
-        createUseAsyncDataConnectors: options.connectors,
+        // Only propagate if explicitly passed — undefined means "ask the user"
+        createUseAsyncDataConnectors: options.connectors === true ? true : undefined,
       });
 
       if (config.verbose) {

package/dist/generators/tanstack-query/generator.d.ts

@@ -1,5 +0,0 @@
-/**
- * Placeholder for TanStack Query composables generator
- * TODO: Implement TanStack Query generation
- */
-export declare function generateTanstackQueryComposables(inputDir: string, outputDir: string): void;

package/dist/generators/tanstack-query/generator.js

@@ -1,11 +0,0 @@
-/**
- * Placeholder for TanStack Query composables generator
- * TODO: Implement TanStack Query generation
- */
-export function generateTanstackQueryComposables(inputDir, outputDir) {
-    console.log('\n📦 @tanstack/vue-query generator\n');
-    console.log(`   Input: ${inputDir}`);
-    console.log(`   Output: ${outputDir}`);
-    console.log('\n⚠️  This generator is not yet implemented.');
-    console.log('   Coming soon!\n');
-}