How to Automate Vue.js v3.5 Code Refactoring with AI - Cut Migration Time by 75%

# Download Cursor from cursor.sh
# Install Vue.js specific extensions
curl -fsSL https://cursor.sh/install | sh

# Install Vue Language Features (Volar)
cursor --install-extension Vue.volar

# Install TypeScript Vue Plugin  
cursor --install-extension Vue.vscode-typescript-vue-plugin

# Install Vue 3.5 snippets
cursor --install-extension hollowtree.vue-snippets

// .cursorrules (place in your project root)
// Vue.js 3.5 Refactoring Rules for AI Assistant

You are a Vue.js 3.5 expert helping refactor legacy Vue code.

## Core Migration Patterns:

1. **Options API → Composition API**
   - Convert data() to ref() or reactive()
   - Transform methods to regular functions
   - Replace lifecycle hooks with onMounted, onUpdated, etc.
   - Move computed properties to computed() calls

2. **Vue 3.5 Specific Optimizations**
   - Use defineModel() for v-model bindings
   - Replace $emit with defineEmits()
   - Convert mixins to composables
   - Apply new script setup syntax where beneficial

3. **TypeScript Integration**
   - Add proper type annotations for props
   - Use generic components where appropriate
   - Implement proper return types for composables

## Code Style Requirements:
- Use script setup syntax for new components
- Prefer composition over inheritance
- Add JSDoc comments for complex logic
- Maintain consistent naming conventions

## Performance Optimizations:
- Suggest v-memo for expensive renders  
- Recommend lazy loading for large components
- Identify opportunities for computed vs reactive
- Flag potential memory leaks in cleanup

When refactoring, always:
1. Show before/after code examples
2. Explain why the change improves the code
3. Point out Vue 3.5 specific benefits
4. Suggest related optimizations

# Install codemod globally
npm install -g @codemod/codemod

# Download Vue.js specific transforms
npx @codemod/codemod init

# Install Vue 3.5 migration codemods
npx @codemod/codemod vue/migrate-to-composition-api
npx @codemod/codemod vue/update-lifecycle-hooks  
npx @codemod/codemod vue/modernize-script-setup

Refactor this Vue component to Vue 3.5 Composition API:

Requirements:
1. Convert to script setup syntax
2. Use defineProps and defineEmits  
3. Replace data/computed/methods with composition functions
4. Add TypeScript if not present
5. Optimize for Vue 3.5 performance features
6. Maintain exact same functionality

Show before/after comparison and explain key improvements.

<script>
export default {
  name: 'UserProfile',
  props: ['userId'],
  data() {
    return {
      user: null,
      loading: false,
      error: null
    }
  },
  async mounted() {
    this.fetchUser()
  },
  methods: {
    async fetchUser() {
      this.loading = true
      try {
        const response = await this.$http.get(`/users/${this.userId}`)
        this.user = response.data
      } catch (err) {
        this.error = err.message
      } finally {
        this.loading = false
      }
    },
    updateUser(userData) {
      this.user = { ...this.user, ...userData }
      this.$emit('user-updated', this.user)
    }
  },
  computed: {
    fullName() {
      return this.user ? `${this.user.firstName} ${this.user.lastName}` : ''
    },
    isLoaded() {
      return !this.loading && this.user !== null
    }
  }
}
</script>

<script setup lang="ts">
interface User {
  id: number
  firstName: string
  lastName: string
  email: string
}

interface Props {
  userId: number
}

const props = defineProps<Props>()
const emit = defineEmits<{
  'user-updated': [user: User]
}>()

// Reactive state
const user = ref<User | null>(null)
const loading = ref(false)
const error = ref<string | null>(null)

// Computed properties
const fullName = computed(() => 
  user.value ? `${user.value.firstName} ${user.value.lastName}` : ''
)

const isLoaded = computed(() => 
  !loading.value && user.value !== null
)

// Methods
const fetchUser = async () => {
  loading.value = true
  error.value = null
  
  try {
    const response = await $fetch<User>(`/api/users/${props.userId}`)
    user.value = response
  } catch (err) {
    error.value = err instanceof Error ? err.message : 'Failed to fetch user'
  } finally {
    loading.value = false
  }
}

const updateUser = (userData: Partial<User>) => {
  if (!user.value) return
  
  user.value = { ...user.value, ...userData }
  emit('user-updated', user.value)
}

// Lifecycle
onMounted(() => {
  fetchUser()
})

// Cleanup (Vue 3.5 optimization)
onUnmounted(() => {
  // Cancel any pending requests
  error.value = null
})
</script>

Analyze these 3 Vue components and extract shared logic into composables:

[Paste 3 similar components]

Create composables for:
1. API data fetching patterns
2. Form validation logic  
3. Common UI state management
4. Error handling strategies

Use Vue 3.5 best practices and TypeScript.

// composables/useUserApi.ts
export function useUserApi() {
  const loading = ref(false)
  const error = ref<string | null>(null)

  const fetchUser = async (userId: number) => {
    loading.value = true
    error.value = null
    
    try {
      const user = await $fetch<User>(`/api/users/${userId}`)
      return user
    } catch (err) {
      error.value = err instanceof Error ? err.message : 'Fetch failed'
      throw err
    } finally {
      loading.value = false
    }
  }

  const updateUser = async (userId: number, userData: Partial<User>) => {
    loading.value = true
    error.value = null
    
    try {
      const updatedUser = await $fetch<User>(`/api/users/${userId}`, {
        method: 'PATCH',
        body: userData
      })
      return updatedUser
    } catch (err) {
      error.value = err instanceof Error ? err.message : 'Update failed'
      throw err
    } finally {
      loading.value = false
    }
  }

  return {
    loading: readonly(loading),
    error: readonly(error),
    fetchUser,
    updateUser
  }
}

Analyze this Vue 3.5 component for performance optimizations:

[Paste component code]

Focus on:
1. v-memo opportunities for expensive renders
2. defineModel() for complex v-model scenarios  
3. Lazy loading and code splitting opportunities
4. Memory leak prevention in composables
5. Reactivity system optimizations

Provide specific code examples for each optimization.

<template>
  <!-- Before: Re-renders entire list on any data change -->
  <div v-for="item in expensiveList" :key="item.id">
    {{ formatData(item) }}
  </div>

  <!-- After: v-memo prevents unnecessary re-renders -->
  <div 
    v-for="item in expensiveList" 
    :key="item.id"
    v-memo="[item.id, item.lastUpdated]"
  >
    {{ formatData(item) }}
  </div>
</template>

<script setup lang="ts">
// Before: Reactive object causes unnecessary reactivity
const settings = reactive({
  theme: 'dark',
  layout: 'grid',  
  filters: { ... }
})

// After: Separate reactive concerns
const theme = ref('dark')
const layout = ref('grid') 
const filters = reactive({ ... }) // Only this needs deep reactivity

// Before: Computed runs on every change
const filteredItems = computed(() => {
  return items.value.filter(item => expensiveFilter(item))
})

// After: Cache expensive computations
const filteredItems = computed(() => {
  return items.value.filter(item => expensiveFilter(item))
})

// Vue 3.5 optimization: Use shallowRef for large data
const chartData = shallowRef(largeDataset)
</script>

#!/bin/bash
# vue-migrate-batch.sh
# Automates AI-assisted Vue.js migration across multiple projects

PROJECTS_DIR="$HOME/projects"
MIGRATION_BRANCH="feature/vue-3.5-migration"

for project in "$PROJECTS_DIR"/vue-*; do
  if [ -d "$project" ]; then
    echo "🚀 Starting migration for: $(basename "$project")"
    
    cd "$project"
    
    # Create migration branch
    git checkout -b "$MIGRATION_BRANCH"
    
    # Copy AI rules
    cp ~/.cursorrules .cursorrules
    
    # Run automated transforms
    npx @codemod/codemod vue/migrate-to-composition-api --dry-run
    read -p "Apply codemods? (y/n) " -n 1 -r
    if [[ $REPLY =~ ^[Yy]$ ]]; then
      npx @codemod/codemod vue/migrate-to-composition-api
    fi
    
    # Open in Cursor for AI refinement
    cursor .
    
    echo "✅ Setup complete for $(basename "$project")"
    echo "🤖 Use Cursor AI to refine the automated changes"
    
    read -p "Continue to next project? (y/n) " -n 1 -r
    if [[ ! $REPLY =~ ^[Yy]$ ]]; then
      break
    fi
  fi
done