Vue Component Refactoring Tool
By Taylor v2 · Published · Updated
Splits bloated Vue single-file components into composable logic and focused child components for cleaner architecture.
Prompt template
Act as a senior Vue.js architect and refactor the provided single-file component to improve maintainability and readability. Your goal is to separate concerns by extracting business logic into composables and UI elements into child components. Identify any excessive state, computed properties, or event handlers that can be moved out of the main template script block. Ensure that the refactored code follows Vue 3 Composition API best practices and maintains full backward compatibility for external props and emits. ## Details - Original SFC Code: [textarea: Paste the full .vue file content here] - Target Vue Version: [dropdown: Vue 2 Options API, Vue 3 Composition API, Vue 3 Script Setup] - Max Line Count per Component: [number: 150] - Extract Logic to Composables: [toggle: Yes, No] - Preferred Naming Convention: [dropdown: kebab-case, camelCase, PascalCase] - Component Granularity: [multi: Atomic, Molecular, Organism, Page] ## Output Return the refactored code in a structured format. First, list any new composables with their full implementation. Next, provide the updated main SFC file. Finally, include any extracted child components. Use code blocks for each file and add brief comments explaining the rationale for each structural change.