Appearance

Layouts Documentation ​

Overview ​

This section documents all layout components used in the Collage Brand Portal application. Layouts provide the structural framework for pages and define the overall page structure, navigation, and common UI elements.

Layout Architecture ​

Layouts in Nuxt 4 follow a hierarchical structure where each page can specify which layout to use. The application uses 4 main layouts, each designed for specific use cases.

Architecture Pattern ​

┌─────────────────────────────────────────┐
│         Nuxt App (app.vue)              │  ← Root application wrapper
├─────────────────────────────────────────┤
│         Layout Component                │  ← Selected layout (collage-layout, login-layout, etc.)
│  ┌───────────────────────────────────┐  │
│  │  Global Components                 │  │  ← Header, Sidebar, Snackbar
│  ├───────────────────────────────────┤  │
│  │  Page Content (NuxtPage)          │  │  ← Individual page components
│  └───────────────────────────────────┘  │
└─────────────────────────────────────────┘

Layout Selection ​

Layouts are selected using Nuxt's definePageMeta:

vue
<script setup lang="ts">
definePageMeta({
  layout: 'collage-layout'  // or 'login-layout', 'default', 'error-layout'
})
</script>

If no layout is specified, default.vue is used automatically.

Layout Structure ​

app/layouts/
├── collage-layout.vue      # Main application layout with header and sidebar
├── default.vue              # Default minimal layout (fallback)
├── error-layout.vue         # Error page layout (404, 500, etc.)
└── login-layout.vue         # Authentication pages layout

Layout Components ​

Collage Layout ​

Primary Layout for Authenticated Pages

The main application layout used for all authenticated pages. Provides:

  • Top header with search, notifications, and user menu
  • Left sidebar navigation
  • Main content area
  • Global snackbar notifications
  • Brand integration (logo, favicon, SEO)

Used By:

  • Dashboard
  • Search page
  • Folders pages
  • Collage pages
  • Sharing page
  • Profile page
  • Asset details pages

Components:

  • <Header /> - Top navigation header
  • <SideBar /> - Left sidebar navigation
  • <Snackbar /> - Global notifications
  • <NuxtPage /> - Page content

Default Layout ​

Minimal Fallback Layout

The simplest layout with no additional structure. Used as fallback when no layout is specified.

Used By:

  • Pages that don't specify a layout
  • Simple standalone pages

Components:

  • <NuxtPage /> - Page content only

Error Layout ​

Error Page Layout

Layout specifically designed for error pages (404, 500, etc.). Provides a v-main wrapper for proper Vuetify styling.

Used By:

  • 404 error pages
  • 500 error pages
  • Other error states

Components:

  • <v-main> - Vuetify main container
  • <NuxtPage /> - Error page content

Login Layout ​

Authentication Pages Layout

Layout for authentication and public pages. Includes brand branding and centered content area.

Used By:

  • Login page
  • Forgot password page
  • Reset password page
  • Generate password page
  • Public shared asset pages

Components:

  • Brand logo/name display
  • Centered content area
  • "Powered by Collage" footer
  • <NuxtPage /> - Authentication page content

Layout Features ​

Brand Integration ​

Both collage-layout and login-layout integrate brand information:

  • Brand Logo: Fetches and displays brand logo
  • Brand Name: Uses brand name for titles and fallbacks
  • Favicon: Dynamic favicon based on brand
  • SEO: Sets page title and Open Graph metadata

SEO Configuration ​

Layouts configure SEO metadata:

typescript
useHead({
  title: () => `${brandName} Brand Portal by Collage Inc`,
  link: [{ rel: "icon", type: "image/svg+xml", href: faviconUrl }]
})

useSeoMeta({
  ogImage: logo,
  ogTitle: `${brandName} Brand Portal by Collage Inc`,
  // ...
})

Loading States ​

Layouts handle loading states:

  • Skeleton loaders during brand data fetch
  • Content loading indicators
  • Smooth transitions when data loads

Layout Selection Guide ​

When to Use Each Layout ​

collage-layout:

  • ✅ Authenticated pages
  • ✅ Pages requiring navigation
  • ✅ Pages with header/sidebar
  • ✅ Main application pages

login-layout:

  • ✅ Authentication pages
  • ✅ Public pages
  • ✅ Pages without navigation
  • ✅ Centered content pages

error-layout:

  • ✅ Error pages (404, 500)
  • ✅ Pages with error states

default:

  • ✅ Simple pages
  • ✅ Pages without specific requirements
  • ✅ Fallback for unspecified layouts

Layout Composition ​

Component Hierarchy ​

collage-layout
├── v-app (Vuetify root)
│   ├── .main
│   │   ├── Header (global)
│   │   └── .collage-main
│   │       ├── SideBar (global)
│   │       └── NuxtPage (page content)
│   └── Snackbar (global)
login-layout
├── v-app (Vuetify root)
│   └── .main
│       └── .signin-screen
│           └── .signin-screen-table
│               ├── Brand logo/name
│               ├── NuxtPage (auth page content)
│               └── "Powered by Collage" footer

Styling ​

Layouts use global SCSS classes from the styling system:

  • .main - Main container
  • .collage-main - Main content area
  • .signin-screen - Login screen container
  • .signin-screen-table - Centered table layout
  • .signin-screen-content - Content area
  • .brand-logo - Brand logo styling
  • .powered-by-collage - Footer branding

See Styling - Layout for detailed styles.

Best Practices ​

  1. Layout Selection: Always specify layout in definePageMeta for clarity
  2. Brand Integration: Use collage-layout or login-layout for brand-aware pages
  3. SEO: Layouts handle SEO automatically, but pages can override
  4. Loading States: Layouts provide loading states, pages should handle their own
  5. Component Usage: Use global components (Header, SideBar) only in appropriate layouts
  6. Responsive Design: All layouts are responsive and mobile-friendly