Cómo usar esta herramienta para desarrolladores
- Pega el SFC.
- Ejecuta “Ver estructura”.
- Usa el árbol textual para localizar zonas y componentes.
- Copia el esquema si quieres incluirlo en una revisión o nota técnica.
Visor de Vue
Convierte un archivo Vue SFC en un esquema legible para entender su estructura sin recorrer todo el código. El visor presenta los bloques presentes, una jerarquía aproximada de etiquetas del template, componentes personalizados y atributos relevantes como directivas, eventos y bindings. Resulta útil cuando recibes un componente grande y necesitas ubicar rápidamente sus piezas antes de abrirlo en un IDE.
Datos de entrada
Vue SFCEspacio publicitario
Qué hace esta herramienta para desarrolladores
El esquema destaca la organización del SFC y del template; no renderiza el componente ni ejecuta Vue.
El template se tokeniza por etiquetas de apertura y cierre para construir una profundidad aproximada. En cada nodo se muestran directivas y atributos enlazados relevantes.
Los templates con HTML inválido, slots muy dinámicos o etiquetas construidas en tiempo de ejecución pueden producir un esquema aproximado.
Ejemplo
Entrada de ejemplo
<template>
<main class="page">
<UserList :items="users" @select="open" />
<footer v-if="users.length">{{ users.length }} usuarios</footer>
</main>
</template>
<script setup>
const users = []
</script>Ejecuta la herramienta para ver una salida generada a partir de este ejemplo.
Casos de uso
- Orientarse en componentes largos.
- Documentar la jerarquía de una vista Vue.
- Revisar qué componentes hijos aparecen en un template.
- Compartir una vista estructural sin ejecutar el proyecto.
Consejos para obtener resultados fiables
- Incluye el template completo para obtener una jerarquía coherente.
- Interpreta <component :is> como un nodo dinámico.
- Comprueba imports aparte si necesitas confirmar dependencias.
- Usa el parser si necesitas JSON en vez de un esquema humano.
Detalles del procesamiento
Cada línea del árbol representa una etiqueta de apertura. La profundidad máxima se calcula durante el recorrido de cierres y aperturas.
No reproduce el DOM renderizado tras v-if, v-for, slots o componentes hijos.
Preguntas frecuentes
¿Cómo ver la jerarquía de un template Vue sin ejecutar la aplicación?
El visor tokeniza las etiquetas y muestra un árbol textual con sangría.
¿El visor identifica componentes Vue personalizados?
Sí, destaca etiquetas que parecen componentes por mayúsculas o guiones.
¿Muestra directivas como v-if y eventos @click?
Sí, conserva en cada nodo los atributos Vue más relevantes detectados.
¿Puede renderizar visualmente el componente Vue?
No. Es un visor estructural de código, no un runtime ni un preview del navegador.
¿Qué ocurre con componentes dinámicos usando :is?
Se muestra el nodo component y su binding, pero no se resuelve qué componente se renderizará en tiempo de ejecución.
Herramientas relacionadas para desarrolladores
Resumen del módulo
| Área | Comportamiento |
|---|---|
| Vista | Árbol textual del template |
| Contexto | Bloques y componentes |
| Ejecución | Sin renderizar Vue |
Más herramientas de Frontend Frameworks
Explora utilidades relacionadas con Vue, React, Angular y otros frameworks frontend.
Ver Frontend Framework Tools