api-migration

Migrate frontend API contracts from Vue2 to Alova and TypeScript.

Updated Sep 11, 2025
One-click install
npx skills add https://github.com/ruan-cat/11comm-app --skill api-migration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: api-migration
Source: https://github.com/ruan-cat/11comm-app/tree/main/.claude/skills/api-migration
Command: npx skills add https://github.com/ruan-cat/11comm-app --skill api-migration

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Migrate frontend API contracts from legacy Vue2 contexts to Alova + TypeScript, enabling a unified, type-safe interface layer that works across Nitro and Vite mock runtimes while preserving old API paths.

Core Features & Use Cases

  • Migration guidance from Vue2/Vue context to Alova + TS with shared server modules (repository.ts, endpoints.ts) and zero disruption to existing paths.
  • End-to-end alignment of front-end API definitions, back-end repository and endpoints, and mock wrappers to ensure consistent behavior across both H5 mock and Nitro runtimes.
  • Real-world use: refactoring an module's API surface, updating types, and validating against existing mocks and routes.

Quick Start

Migrate a single module end-to-end by updating src/api/{module}.ts and aligning server/modules/{module}/repository.ts and endpoints.ts.

Frequently Asked Questions about api-migration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate Vue2 frontend API contracts to Alova and TypeScript?▼

To migrate frontend API contracts to Alova and TypeScript, you update src/api/{module}.ts and align server/modules/{module}/repository.ts and endpoints.ts. This creates a unified, type-safe interface layer across Nitro and Vite mock runtimes.

What is the best way to keep old API paths like /app/** working during a TypeScript migration?▼

The best way to preserve old API paths like /app/** during a TypeScript migration is to sync src/api, server/modules, and mock definitions. This approach ensures zero disruption to existing routes across both H5 mock and Nitro runtimes.

How do I align mock wrappers and backend endpoints for Vite and Nitro runtimes?▼

You align mock wrappers and backend endpoints by updating server/modules/{module}/endpoints.ts and corresponding mock definitions alongside src/api/{module}.ts. This end-to-end alignment ensures consistent behavior across both Vite and Nitro runtimes.

Do I need to remove ApiResponse wrappers when migrating API typings to TypeScript?▼

Yes, you need to exclude ApiResponse wrappers when migrating API typings to TypeScript. The migration enforces that API typings exclude these wrappers to maintain a clean, type-safe interface layer in Alova.

Can I use Alova with both Nitro and Vite mock runtimes in the same project?▼

Yes, you can use Alova with both Nitro and Vite mock runtimes in the same project. The migration targets projects that maintain old paths across both runtimes, ensuring consistent behavior and a unified interface layer.

Why are my migrated API types out of sync between frontend definitions and server modules?▼

Migrated API types fall out of sync when src/api/{module}.ts, server/modules/{module}/repository.ts, and endpoints.ts are not updated together. You must align all three files and their corresponding mock wrappers to ensure type safety and consistent behavior.