App Shell
Configura la estructura base de una aplicación con EApp, EBar, EDrawer y EMain. Estos componentes comparten el mismo contexto de layout para coordinar la barra, la navegación y el contenido.
Estructura
El shell separa la aplicación en regiones con responsabilidades claras.
EApp
Crea el contexto de layout que comparten todas las regiones.
EBar
Contiene la identidad, el título y las acciones superiores de la aplicación.
EDrawer
Contiene los enlaces y menús de navegación principal.
EMain y EContainer
Alojan la página activa y mantienen el contenido alineado.
Plantilla base
Usa este playground como plantilla base recomendada para EApp, EBar, EDrawer y EMain. Ajusta props de layout como clipped y fixed, y luego copia el snippet generado con NuxtPage dentro de EContainer.
Verifica la estructura
Antes de personalizar cada componente, confirma que la composición base funciona.
- La barra se renderiza dentro del contexto de EApp.
- El drawer puede abrirse y cerrarse mediante drawerModel.
- La página activa se muestra dentro de EMain y EContainer.
- El contenido no necesita offsets o padding manual para compensar la barra y el drawer.
Siguientes pasos
Continúa con la guía específica de cada región cuando necesites configurar su comportamiento o apariencia.