Vue Migration Helper

AI-powered VS Code extension to migrate Vue.js components from Options API to Composition API with TypeScript.

Features

• 🚀 Automatic migration from Options API to Composition API
• 📝 JavaScript to TypeScript conversion
• 🤖 Powered by Groq AI (free tier)
• 🎯 Reads your project's coding guidelines (AGENTS.md or custom file)
• 📊 Reads your ESLint configuration for accurate code generation
• 📋 Detailed migration report with warnings and suggestions
• 🔒 Your guidelines stay local - nothing hardcoded in the extension

Quick Start

1. Install

code --install-extension r2dx.co-vue-migration-helper

2. Configure Groq API Key

Get a free API key at https://console.groq.com/keys

Ctrl+Shift+P → "Vue Migration: Configure Groq API Key"

3. Create Guidelines File (Optional)

Create AGENTS.md at your workspace root:

# Coding Guidelines

## Vue Migration Rules
- Use `<script setup lang="ts">`
- Use const for non-reassigned variables
- Use early returns instead of nested if

## Global Symbols (Never import)
- ref, computed, watch, onMounted
- Your global utilities

## Linting Rules
- No console.log
- prefer-const
- prefer-arrow-callback

4. Configure ESLint Path (Optional)

If your .eslintrc.js is not at workspace root:

Settings → Vue Migration Helper: Eslint Config File
→ "path/to/.eslintrc.js"

5. Migrate

1. Open a .vue file
2. Right-click → Migrate to Composition API
3. Review the migration report

Configuration

How It Works

Your .vue file + AGENTS.md + .eslintrc.js
              ↓
         Groq AI (Llama 3.3 70B)
              ↓
  Migrated code + Migration report

Migration Report

After each migration:

• Statistics: Props, data, methods, computed, hooks converted
• Warnings: Linting issues, mixins, Vuex usage, complex logic
• Improvements: Suggested code quality enhancements
• Manual Review: Items requiring your attention

Privacy

• ✅ Guidelines and ESLint config stay local (read when needed)
• ✅ Only the Vue file content is sent to Groq API
• ✅ Groq has zero data retention policy
• ✅ API key stored locally in VS Code settings

Requirements

• VS Code 1.85.0 or higher
• Free Groq API key (https://console.groq.com/keys)

Commands

• Vue Migration: Migrate to Composition API - Migrate current file
• Vue Migration: Configure Groq API Key - Set your API key

License

MIT

• Logging : Logger.log() au lieu de console.log
• Gestion d'erreurs : Pas de try/catch silencieux
• Templates : PascalCase pour les composants

⚠️ Points d'attention

• Vérifiez toujours le code migré
• Testez le composant après migration
• Les imports non-globaux doivent être ajustés manuellement si nécessaire

🛠️ Développement

Prérequis

• Node.js 18+
• VS Code 1.120+

Installation

cd vue-migration-extension
npm install

Lancer en mode développement

npm run watch

Puis appuyez sur F5 pour ouvrir une nouvelle fenêtre VS Code avec l'extension chargée.

Compiler pour production

npm run package

📝 Exemple

Avant (Options API + JavaScript) :

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

<script>
export default {
  props: ['initialCount'],
  data() {
    return {
      count: this.initialCount || 0,
      title: 'Counter'
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log('Component mounted')
  }
}
</script>

Après (Composition API + TypeScript) :

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  initialCount?: number
}>()

const count = ref(props.initialCount || 0)
const title = ref('Counter')

const doubleCount = computed(() => count.value * 2)

const increment = () => {
  count.value++
}

onMounted(() => {
  Logger.log(LoggerChannels.COMPONENT, 'Component mounted')
})
</script>

🔑 Groq API (gratuit)

Cette extension utilise Groq, qui offre :

• ✅ API gratuite avec limite généreuse
• ✅ Modèle Llama 3.3 70B ultra-rapide
• ✅ Pas de carte bancaire requise

📄 Licence

MIT

🤝 Contribution

Les contributions sont les bienvenues ! N'hésitez pas à ouvrir une issue ou une PR.