Layouts
How layouts work in Nuxt and a reference for all 7 layout variants in Haze Dashboard.
How Layouts Work
Layouts in Nuxt are wrapper components that surround page content. They live in app/layouts/ and contain a <slot /> where the page content renders. The default.vue layout is used automatically unless a page specifies a different one.
To assign a specific layout, use definePageMeta in the page's <script setup>:
Login
Layout Reference
Haze Dashboard includes 7 layouts, each designed for a different context:
| Name | File | Description | Used By |
|---|---|---|---|
| default | default.vue | Fixed dark sidebar on the left, header with backdrop blur at the top, content area with page transitions | Dashboards, CRUD pages, apps, settings, docs |
| horizontal | horizontal.vue | Top navigation bar with dropdown menus instead of a sidebar. Same header and content area. | Alternative dashboard layout |
| auth | auth.vue | Centered card on a clean background. Minimal chrome for focused form input. | Classic login, register, forgot password |
| auth-split | auth-split.vue | Two-panel layout: dark branding/illustration panel on the left, white form panel on the right. | Split-screen login, register |
| auth-cover | auth-cover.vue | Full-screen gradient background with a frosted glass card overlay in the center. | Cover-style login, register |
| marketing | marketing.vue | Public-facing layout with a marketing navbar (logo, nav links, CTA button) and a footer with links and copyright. | Landing page, about, contact, FAQ, blog, shop |
| blank | blank.vue | Completely empty — no sidebar, no header, no footer. Just the page content. | Error pages (404, 403, 500), coming soon, maintenance |
Default Layout (Sidebar)
The default layout is the most complex. It consists of:
- DashboardAppSidebar — Fixed left sidebar with dark charcoal background, logo, navigation groups, and a user section at the bottom. Collapsible on desktop, slide-out drawer on mobile.
- DashboardAppHeader — Sticky header with backdrop blur. Contains a search trigger, locale switcher, color mode toggle, notification bell, and user avatar dropdown.
- Content area — Scrollable main content with padding. Page transitions (fade + slide up) animate between route changes.
Creating a Custom Layout
To create a new layout, add a .vue file to app/layouts/. The filename becomes the layout name:
My App
Then use it in any page:
Dynamic Layout Switching
You can switch layouts dynamically using setPageLayout in a middleware or computed:
Tip
If you do not specify a layout, Nuxt uses default.vue automatically. Most pages in Haze Dashboard do not set a layout explicitly because the sidebar layout is the correct default.
Next Steps
Learn how to add new pages and routes in the Adding Pages guide, or explore the Theming reference.