skills.rest
ruan-cat
ruan-catCOMMUNITY
Explore all skills by this author →
GitHub

code-migration

Migrate Vue2 Options API projects to Vue3 Composition API with TypeScript.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enables Vue2 projects using Options API to be migrated to Vue3 with the Composition API and TypeScript, improving maintainability, type safety, and future-proofing codebases.

Core Features & Use Cases

  • Convert Options API (data, methods, computed) to Composition API using ref(), reactive(), and computed().
  • Introduce TypeScript typings and migrate lifecycle hooks (mounted → onMounted, etc.).
  • Migrate Vuex to Pinia and implement composables for logic reuse.
  • Add definePage page configuration to align with the new routing model.
  • Provide migration patterns and guidelines for handling static resources and imports.

Quick Start

Identify Vue2 components, plan Composition API refactors, add TypeScript typings, convert lifecycle hooks, and migrate state management to Pinia.

Frequently Asked Questions about code-migration

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

FAQPage Schema
How do I migrate a Vue2 Options API project to Vue3 Composition API?▼

Migrate Vue2 to Vue3 by replacing data(), methods, and computed with ref(), reactive(), and computed(), removing use of this, and ensuring proper TypeScript typing and resource imports.

What is the best way to convert Vue2 lifecycle hooks to Vue3?▼

Convert Vue2 lifecycle hooks to Vue3 by mapping them to Composition API equivalents, such as changing mounted to onMounted, while introducing TypeScript typings to enforce type safety during the component refactor.

Can I migrate Vuex state management to Pinia when upgrading to Vue3?▼

Yes, you can migrate Vuex to Pinia during your Vue3 upgrade to implement composables for logic reuse, ensuring state management aligns with the Composition API and TypeScript.

Does this Vue3 migration process support adding definePage for routing?▼

Yes, the Vue3 migration process supports adding definePage page configuration to align with the new routing model, alongside migrating state management to Pinia and integrating TypeScript.

What are the limitations of migrating Vue2 apps to Vue3 with TypeScript?▼

Limitations involve enforcing best practices across the entire codebase, requiring the complete removal of this, refactoring all lifecycle hooks, and ensuring proper typing for all resource imports and definePage usage.

Related Skills

Explore More Software Engineering Skills→
hanamizukihanamizuki
127

play-billing-library-version-upgrade

Plan Google Play Billing Library migrations from current baselines to latest stable versions.

Community
Advanced
ruan-catruan-cat

route-migration

Migrate Vue2 pages.json routing to Vue3 filesystem-based routing with type-safe navigation.

Community
Advanced
dang0705dang0705

pinia

Define type-safe stores for Vue applications using Pinia.

Community
Advanced
Mekann2904Mekann2904

code-transform

no response

Community
Advanced