Migrate Vue Options API Components to Composition API with Claude
Migrating a Vue 2-era codebase to the Composition API is tedious — but Claude can do an entire component in one shot.
Paste your component and ask Claude to rewrite it:
Rewrite this Vue Options API component using the Composition API with <script setup> syntax.
Preserve all existing behaviour, watchers, and lifecycle hooks. Use composables where it makes sense.
@components/UserProfile.vue
Claude will handle the fiddly parts that trip people up: converting this.$emit to defineEmits, turning computed properties into computed() refs, migrating watch with the right flush options, and wrapping mounted/beforeDestroy into onMounted/onUnmounted.
It'll also spot opportunities to extract reusable logic into composables — for example, a component with data-fetching logic might get a useFetchUser() composable pulled out automatically.
For large codebases, work file by file and ask Claude to flag anything it wasn't sure about:
Migrate @components/UserProfile.vue to <script setup>.
List any behaviour you changed or anything you weren't confident about.
Reviewing one component at a time means you catch regressions before they compound.
Migrating from Options to Composition API is a slog — but with Claude it becomes a file-by-file, review-and-merge workflow rather than a months-long rewrite.
Log in to leave a comment.
The /security-review command scans your uncommitted changes for injection vectors, auth gaps, hardcoded secrets, and other common vulnerabilities.
The SessionStart hook fires when any session begins or resumes, making it ideal for loading environment variables and running one-time setup scripts.
Ask Claude to write property-based tests for your functions using fast-check — it identifies the mathematical invariants in your code and generates tests that cover inputs you'd never enumerate by hand.