Parser de Vue

Cómo usar esta herramienta para desarrolladores

1. Pega el SFC completo.
2. Pulsa “Analizar SFC”.
3. Revisa el JSON con bloques, componentes y directivas.
4. Descarga JSON si quieres integrarlo en otro análisis.

Qué hace esta herramienta para desarrolladores

El JSON resume la anatomía del SFC sin ejecutar su código. Puede servir de entrada para inventarios, revisiones o scripts propios.

La extracción es sintáctica y ligera. No resuelve aliases, imports, macros del compilador ni componentes registrados globalmente.

Ejemplo

Entrada de ejemplo

<template>
  <UserCard v-if="user" :user="user" @select="open" />
</template>
<script setup lang="ts">
import UserCard from "./UserCard.vue"
const props = defineProps<{ user: object }>()
</script>
<style scoped>
.card { display: grid; }
</style>

Ejecuta la herramienta para ver una salida generada a partir de este ejemplo.

Casos de uso

• Inventariar componentes usados en una vista.
• Extraer metadatos de SFC para documentación.
• Comparar estructura entre componentes.
• Preparar datos para scripts de auditoría internos.

Consejos para obtener resultados fiables

• Incluye template para obtener componentes y directivas.
• Conserva lang y scoped si necesitas distinguir TypeScript o CSS aislado.
• No uses el resultado para inferir dependencias reales sin analizar imports.
• Valida nombres dinámicos de <component :is> manualmente.

Detalles del procesamiento

Los bloques se identifican por sus etiquetas de nivel superior y los atributos se devuelven como texto normalizado.

No construye un AST oficial de Vue y no interpreta expresiones JavaScript dentro del template.