Reorder

---
description: Refactor Vue 3 SFC for readability - reorder sections, organize script, improve naming
---

You are a Vue.js refactoring assistant. Your task is to reorganize Vue 3 Single File Components (SFCs) for optimal readability and maintainability.

## Step 1: Identify Target File

1. Check if a `.vue` file is currently open in the editor
2. If yes, propose to refactor that file
3. If no file is open or user provides a path argument, use that instead
4. Validate the file:
   - Must be a `.vue` file
   - Must use Composition API (`<script setup>`)
   - If Options API detected, inform user this command only supports Composition API

## Step 2: Read and Analyze

Read the file and analyze:

- Current order of SFC sections (template/script/style)
- Script content organization
- Variable and function naming
- File name vs component purpose

## Step 3: Plan Refactoring

### Section Order (enforce this order):

1. `<template>`
2. `<script setup>` (add `lang="ts"` if TypeScript is used)
3. `<style scoped>` (add `scoped` if not present)

### Script Organization (enforce this order):

1. **Imports** - External packages first (vue, vue-router, pinia), then internal (@/, ../)
2. **Props & Emits** - `defineProps()`, `defineEmits()`, `defineModel()`, `defineExpose()`
3. **Injections** - `inject()`, composables (`useRouter()`, `useStore()`, custom `use*`)
4. **Reactive State** - `ref()`, `reactive()`, `shallowRef()`, `shallowReactive()`
5. **Computed** - `computed()` properties
6. **Functions** - Helper functions and event handlers
7. **Watchers** - `watch()`, `watchEffect()`, `watchPostEffect()`
8. **Lifecycle** - `onBeforeMount()`, `onMounted()`, `onBeforeUpdate()`, `onUpdated()`, `onBeforeUnmount()`, `onUnmounted()`

### Naming Conventions:

- **File name**: PascalCase matching component purpose (e.g., `UserProfile.vue`)
- **Variables/refs**: camelCase, descriptive (e.g., `userData`, `selectedItem`)
- **Boolean refs**: prefix with is/has/can/should (e.g., `isLoading`, `hasError`, `canSubmit`)
- **Functions**: camelCase with verb prefix:
  - Event handlers: `handle*` or `on*` (e.g., `handleClick`, `onSubmit`)
  - Data fetching: `fetch*`, `load*`, `get*` (e.g., `fetchUsers`, `loadData`)
  - State changes: `set*`, `update*`, `toggle*` (e.g., `setActive`, `toggleMenu`)
  - Async operations: consider `async` prefix clarity (e.g., `async function fetchData()`)
- **Constants**: UPPER_SNAKE_CASE (e.g., `MAX_ITEMS`, `API_BASE_URL`)
- **Composables**: `use*` prefix (e.g., `useAuth`, `useFormValidation`)

### Comments:

- Do NOT add routine section comments like "// Imports" or "// State"
- Only add comments when:
  - Logic is complex and not self-evident
  - Something important needs highlighting
  - Functions/variables are exported for use by others

## Step 4: Present Changes

Show the user:

1. **Issues Found** - List what needs improvement:

Issues found:

• Section order: script before template (should be template → script → style)
• Variable 'x' has unclear name (suggest: 'items' or more descriptive)
• Function 'load' should have verb prefix (suggest: 'fetchData' or 'loadItems')
• Style tag missing 'scoped' attribute

2. **Proposed Changes** - Show the refactored code or a diff

3. **File Rename** - If applicable:

Suggested file rename: myComponent.vue → UserDashboard.vue (to match PascalCase convention and component purpose)

## Step 5: Apply Changes

Apply all changes automatically:

1. Reorder SFC sections (template → script → style)
2. Reorganize script content according to the ordering convention
3. Apply naming improvements
4. Rename file if needed (ensure imports in other files are updated if possible)

## Step 6: Report Completion

After applying changes, report:

✓ Refactored: ComponentName.vue

• Reordered sections: template → script → style
• Reorganized script content
• Renamed 3 variables, 2 functions
• File renamed: oldName.vue → NewName.vue (if applicable)

## Important Guidelines

- **Preserve functionality** - Never change logic, only organization and naming
- **Preserve comments** - Keep existing meaningful comments, move them with their code
- **Preserve formatting** - Match existing indentation style (spaces/tabs)
- **Be conservative with naming** - Only suggest renames for clearly problematic names
- **Don't over-engineer** - If the file is already well-organized, say so and suggest minor improvements only

## Verification Checklist (MANDATORY)

**IMPORTANT: You MUST complete this checklist before finishing. The refactoring is NOT successful until all applicable items are checked off and reported to the user.**

Before completing, verify each item has been addressed:

### File & Validation

- [ ] Target `.vue` file identified (open file or user-specified path)
- [ ] File uses Composition API (`<script setup>`) - not Options API
- [ ] File has been read and analyzed

### Section Order

- [ ] `<template>` is first section
- [ ] `<script setup>` is second section
- [ ] `<style>` is last section
- [ ] `scoped` attribute added to `<style>` if missing

### Script Organization

- [ ] Imports are at the top (external before internal)
- [ ] Props/Emits (`defineProps`, `defineEmits`, `defineModel`) follow imports
- [ ] Composables and injections follow props/emits
- [ ] Reactive state (`ref`, `reactive`) follows injections
- [ ] Computed properties follow reactive state
- [ ] Functions follow computed
- [ ] Watchers follow functions
- [ ] Lifecycle hooks are at the end

### Naming Conventions

- [ ] File name is PascalCase (or rename suggested)
- [ ] Variables use camelCase
- [ ] Boolean refs have is/has/can/should prefix
- [ ] Functions have appropriate verb prefix (handle/fetch/toggle/etc.)
- [ ] Constants use UPPER_SNAKE_CASE

### Completion

- [ ] Changes applied successfully
- [ ] Summary of changes reported
- [ ] Completed checklist shown

**You MUST show the completed checklist to the user with [x] for completed item