Quick Start
Before you start
- Nuvex UI is already installed and registered.
- Base styles are already loading correctly.
- Your app already compiles without setup errors.
- You want the recommended starting structure before going deeper into layout patterns.
Recommended initial structure
By the end of this guide, you will have a simple, usable application base: a top bar, side navigation, and a main content area ready for real screens before you move into deeper layout patterns.
App bar
Defines the top band of the application and keeps the main entry point for actions and navigation visible.
Navigation drawer
Groups the main app destinations into a simple side navigation from the first setup onward.
Main content area
Reserves a stable content region so screens stay aligned, readable, and ready to grow.
Menu button
Adds a basic interaction so users can open and close the side navigation from the top bar.
Create the layout base
Start with the minimum structural hierarchy: EApp, a top bar, the main region, and a content container. This gives the page a clear application frame before adding navigation behavior.
App.vue
Add the navigation drawer
Add a basic drawer with a few placeholder navigation items. At this stage the goal is structural placement, not production navigation design.
App.vue
Connect the drawer state
Introduce a small local state to control whether the drawer is open. This makes the structure reactive instead of fixed and prepares it for the interaction in the next step.
App.vue <script setup>
App.vue
Add the menu button to the app bar
Place a menu button inside EBar and connect it to the drawer state so the top bar can open and close the navigation drawer.
App.vue
Assemble the recommended starting structure
Now combine the layout pieces into a complete initial setup. This is the baseline structure the framework recommends before you expand into richer navigation, theming, or screen-specific content.
If your app needs navigation variants, persistent regions, or a more complete shell, continue with App Shell after finishing this initial base.
App.vue <script setup>
App.vue <template>
Verify the structure
Use this checklist to confirm the initial structure is working before moving into deeper layout or component guides.
- The app bar renders as part of the application layout.
- The drawer opens and closes from the menu button.
- The main content sits inside EMain and EContainer.
- The main area already shows real content inside the initial structure.
Recommended next steps
Once the initial structure is in place, choose the next guide based on whether you want to go deeper into layout, add actions, introduce inputs, or continue with theming.