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.