What this prompt does
This prompt produces a migration guide for moving a [project_size] Vue 2 project from the Options API to Vue 3 Composition API with <script setup>. It starts from your [current_state] and lays out a migration priority order — shared and base components first — then walks through converting data, computed, methods, and watch into ref, computed, functions, and watch.
The structure works because it sequences the migration so the app stays releasable the whole way through. It extracts reusable logic from [composable_candidates] into composables, migrates Vuex to [state_management], converts mixins to composables with before/after examples, and handles the breaking changes (v-model, emits, filters removal, teleport). A per-component checklist plus effort estimates for [component_count] components turns a daunting rewrite into a steady, component-by-component path.
The guide also covers the parts of a Vue 2 app that are easy to forget. It updates router guards and navigation for Vue Router 4, replaces the old event bus with provide/inject or a small emitter like mitt, and migrates tests to Composition API patterns so coverage does not rot during the move. Starting from your real [current_state] keeps the advice specific — whether you already have TypeScript or Vue Router 4 changes which steps actually apply to you.
When to use it
- You are modernizing a Vue 2 Options API codebase and want to avoid a risky big-bang rewrite.
- You need a migration order so shared components move first and nothing breaks mid-flight.
- You want to extract repeated logic from
[composable_candidates]into reusable composables. - You are moving from Vuex to
[state_management]as part of the upgrade. - You need to convert mixins to composables and understand the before/after shape.
- You want effort estimates for
[component_count]components to plan the work.
Example output
Expect a structured migration plan: a prioritized component order, conversion patterns from Options API to <script setup> with code samples, composable extractions for [composable_candidates], the Vuex-to-[state_management] migration, mixin-to-composable before/after examples, a breaking-changes checklist, and a per-component migration checklist with effort estimates. It reads as a playbook you work through rather than a one-shot dump.
Pro tips
- Be honest in
[current_state]; whether you already have TypeScript or Vue Router 4 changes the guidance significantly. - Migrate shared and base components first as the order suggests, so downstream components inherit a stable foundation.
- Pull genuinely repeated logic into composables — chasing the
[composable_candidates]that appear in many components gives the biggest payoff. - Do the Vuex-to-
[state_management]move deliberately; mixing both stores mid-migration is where bugs creep in. - Use the per-component checklist to keep the app releasable, shipping migrated components incrementally rather than all at once.
- Treat the effort estimates for
[component_count]as planning guidance, then recalibrate after the first few real migrations. - Replace the global event bus deliberately; lingering bus usage is a common source of subtle bugs after the upgrade.
- Update tests alongside each component so coverage tracks the new Composition API patterns instead of decaying mid-migration.
