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.
Set up Claude Code as an automated reviewer in your CI pipeline — on every pull request, it reads the diff, checks for bugs, security issues, missing tests, and convention violations, then posts its findings as a PR comment. Your human reviewers get a head start because the obvious issues are already flagged before they look.
Before deploying, tell Claude to read your project — migrations, environment variables, queue workers, scheduled tasks, caching, third-party integrations — and generate a deployment checklist that's specific to your app. Not a generic "did you run migrations?" list, but one that knows YOUR infrastructure and catches the things YOUR deploy can break.
Instead of writing a README from memory or copying a template, tell Claude to read your project and generate one that's actually accurate — real setup instructions from your config, real architecture from your directory structure, real API examples from your routes, and real prerequisites from your dependency files.