App Shell
Set up the base application structure with EApp, EBar, EDrawer, and EMain. These components share one layout context to coordinate the bar, navigation, and content.
Structure
The shell separates the application into regions with clear responsibilities.
EApp
Creates the layout context shared by every region.
EBar
Contains the application identity, title, and top-level actions.
EDrawer
Contains primary navigation links and menus.
EMain and EContainer
Host the active page and keep its content aligned.
Base template
Use this playground as the recommended base template for EApp, EBar, EDrawer, and EMain. Toggle layout-related props such as clipped and fixed, then copy the generated snippet with NuxtPage inside EContainer.
Verify the structure
Before customizing each component, confirm that the base composition works.
- The bar renders inside the EApp layout context.
- The drawer opens and closes through drawerModel.
- The active page renders inside EMain and EContainer.
- The content needs no manual offsets or padding to compensate for the bar and drawer.
Next steps
Continue with each region guide when you need to configure its behavior or appearance.