Cómo usar esta herramienta para desarrolladores
- Pega un SFC con export default de Options API.
- Ejecuta la conversión.
- Lee la sección de pendientes incluida como comentarios.
- Prueba el componente convertido dentro de tu aplicación Vue 3.
Convertidor de Vue
Convierte un subconjunto práctico de componentes Vue escritos con Options API a una base con <script setup>. Extrae props sencillas, propiedades devueltas por data() y métodos con sintaxis de método, manteniendo template y style. Cuando detecta computed, watch, mixins u opciones que requieren una traducción semántica más cuidadosa, las enumera como elementos pendientes en vez de fingir una conversión completa.
Datos de entrada
SFC con Options APIEspacio publicitario
Qué hace esta herramienta para desarrolladores
La salida es una migración asistida de patrones simples de Options API. Los casos ambiguos se marcan como pendientes explícitos para revisión manual.
Se localiza export default, se extraen objetos literales básicos de props y el retorno de data(), y se transforman métodos directos. Las referencias this.estado dentro de métodos se sustituyen por estado.value cuando ese estado fue reconocido.
No uses una conversión automática como sustituto de pruebas: la semántica de lifecycle hooks, provide/inject, computed y watch puede requerir cambios manuales.
Ejemplo
Entrada de ejemplo
<template>
<button @click="increment">{{ count }}</button>
</template>
<script>
export default {
props: { label: String },
data() { return { count: 0 } },
methods: { increment() { this.count++ } }
}
</script>Ejecuta la herramienta para ver una salida generada a partir de este ejemplo.
Casos de uso
- Acelerar migraciones pequeñas a Composition API.
- Preparar una primera versión para revisión manual.
- Identificar opciones que impiden una conversión directa.
- Modernizar ejemplos antiguos antes de documentarlos.
Consejos para obtener resultados fiables
- Convierte componentes pequeños primero.
- Añade pruebas antes de migrar componentes con efectos laterales.
- Revisa cualquier uso de this que quede en la salida.
- Migra computed y watch de forma explícita para conservar dependencias y timing.
Detalles del procesamiento
La conversión utiliza patrones textuales acotados y solo transforma construcciones que puede reconocer de forma razonable.
No es un parser de JavaScript completo. Objetos anidados complejos, métodos con llaves internas difíciles de delimitar y opciones avanzadas pueden requerir migración manual.
Preguntas frecuentes
¿Cómo convertir un componente Vue Options API a script setup?
Pega el SFC y ejecuta la conversión; props, data y methods simples se trasladan a declaraciones de Composition API.
¿Convierte computed y watch automáticamente?
No. Los marca como pendientes porque su traducción correcta depende de dependencias y efectos del componente.
¿Qué ocurre con this.count dentro de un método convertido?
Si count procede de data(), se sustituye por count.value porque el estado se genera con ref.
¿La conversión mantiene el template y el style del componente?
Sí. Los bloques template y style detectados se conservan y se reemplaza principalmente el bloque script.
¿Puedo usar la salida directamente en producción?
Debe revisarse y probarse. La herramienta acelera una migración inicial, pero no valida toda la semántica de Vue.
Herramientas relacionadas para desarrolladores
Resumen del módulo
| Área | Comportamiento |
|---|---|
| Origen | Options API |
| Destino | Vue 3 <script setup> |
| Estrategia | Conversión parcial con pendientes explícitos |
Más herramientas de Frontend Frameworks
Explora utilidades relacionadas con Vue, React, Angular y otros frameworks frontend.
Ver Frontend Framework Tools