Genera un componente Vue 3 de archivo único a partir de una pequeña especificación JSON. Puedes definir el nombre conceptual del componente, props con tipos y valores predeterminados, eventos emitidos y estado reactivo inicial. El resultado usa <script setup>, defineProps, defineEmits y ref cuando corresponde, de modo que sirve como punto de partida editable para un proyecto con Vue 3.
La salida es un SFC de Vue 3 pensado como esqueleto inicial. Genera declaraciones coherentes y un template mínimo que puedes ampliar en tu editor.
El generador no conoce la lógica de negocio ni los tipos complejos de tu aplicación; revisa props, imports y marcado antes de integrarlo.
{"name":"UserCard","props":[{"name":"user","type":"Object","required":true},{"name":"compact","type":"Boolean","default":false}],"emits":["select"],"state":[{"name":"expanded","value":false}]}Ejecuta la herramienta para ver una salida generada a partir de este ejemplo.
Los valores primitivos se serializan como JavaScript. Para objetos y arrays se generan funciones factory dentro de default cuando la especificación lo requiere.
No genera imports de componentes hijos, interfaces TypeScript, pruebas ni rutas; tampoco infiere el template a partir de un diseño.
Incluye name y las listas opcionales props, emits y state; la salida coloca las declaraciones dentro de <script setup>.
Sí. Cada prop puede incluir type, required y default; el generador construye la configuración correspondiente.
No. La salida está orientada a Vue 3 y utiliza <script setup>.
Se envuelven en una función factory para evitar compartir la misma referencia entre instancias.
No para generar el texto. Para ejecutar el componente sí necesitas un proyecto Vue 3 configurado.
| Área | Comportamiento |
|---|---|
| Entrada | JSON de props, emits y estado |
| Salida | Archivo .vue con script setup |
| Objetivo | Esqueleto editable de Vue 3 |
Explora utilidades relacionadas con Vue, React, Angular y otros frameworks frontend.
Ver Frontend Framework Tools