Inicio rapido
Antes de empezar
- Nuvex UI ya esta instalado y registrado.
- Los estilos base ya cargan correctamente.
- La app ya compila sin errores de setup.
- Quieres la estructura inicial recomendada antes de entrar en patrones de layout mas profundos.
Estructura inicial recomendada
Al terminar esta guia tendras una base de aplicacion simple y util: una barra superior, navegacion lateral y un area principal lista para empezar a montar pantallas reales antes de pasar a patrones de layout mas avanzados.
App bar
Define la franja superior de la aplicacion y deja visible el punto de entrada principal para acciones y navegacion.
Drawer de navegacion
Agrupa los destinos principales de la app en una navegacion lateral sencilla desde el primer setup.
Area principal
Reserva una zona de contenido estable para que las pantallas queden alineadas, legibles y listas para crecer.
Boton de menu
Agrega una interaccion basica para abrir y cerrar la navegacion lateral desde la barra superior.
Crea la base del layout
Empieza con la jerarquia estructural minima: EApp, una barra superior, la region principal y un contenedor de contenido. Eso da un marco claro a la app antes de agregar navegacion.
App.vue
Agrega el drawer de navegacion
Agrega un drawer basico con algunos items de navegacion de ejemplo. En este punto el objetivo es la estructura, no el diseno final de navegacion.
App.vue
Conecta el estado del drawer
Introduce un estado local pequeno para controlar si el drawer esta abierto. Con esto la estructura deja de ser fija y queda lista para conectar la interaccion del siguiente paso.
App.vue <script setup>
App.vue
Agrega el boton de menu en la app bar
Coloca un boton de menu dentro de EBar y conectalo con el estado del drawer para abrir y cerrar la navegacion lateral.
App.vue
Arma la estructura inicial recomendada
Ahora junta las piezas en un setup inicial completo. Esta es la base estructural que recomienda el framework antes de expandir hacia navegacion mas rica, theming o contenido real de pantalla.
Si tu app necesita variantes de navegacion, areas persistentes o un shell mas completo, continua con App Shell despues de terminar esta base inicial.
App.vue <script setup>
App.vue <template>
Verifica la estructura
Usa esta lista para confirmar que la estructura inicial ya funciona antes de pasar a layout mas profundo o a guias de componentes.
- La app bar se renderiza como parte del layout de la aplicacion.
- El drawer abre y cierra desde el boton de menu.
- El contenido principal queda dentro de EMain y EContainer.
- El area principal ya muestra contenido real dentro de la estructura inicial.
Siguientes pasos recomendados
Con la estructura inicial lista, elige la siguiente guia segun si quieres profundizar en layout, agregar acciones, introducir inputs o continuar con theming.