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'
})
</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-auth.vue           # Error page shell for signed-in users (header + sidebar)
├── error-layout.vue         # Legacy error layout (no longer referenced)
└── 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 Auth Layout (error-auth.vue) ​

Error page shell for signed-in users (added in ee26b58)

Rendered by app/error.vue through <NuxtLayout name="error-auth"> when the user is authenticated, the route has a brand_name, and the status code is not 401. Unlike collage-layout, it renders the error through <slot /> rather than <NuxtPage />.

Behavior:

  • Seeds useRouteFromMiddleware() from the current route (params, query, path, fullPath, name) if it is empty, so the header and sidebar composables have route state on an error page.
  • hideSearch = route.name !== "brand_name-search": the header search bar is hidden on every error page except one raised on the search page itself (for example "The search URL is invalid.").
  • Watches route.fullPath and calls clearError() on change, so navigating from the sidebar or header leaves the error state.

Components:

  • <Header :hide-search="hideSearch" />, <SideBar />, <Snackbar /> (each inside <ClientOnly>)
  • <slot /> - the Error component

Error Layout ​

Legacy error layout

A v-main wrapper around <NuxtPage />. Since ee26b58 app/error.vue no longer selects it and nothing on origin/development references it.

Components:

  • <v-main> - Vuetify main container
  • <NuxtPage /> - 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-auth:

  • ✅ Selected automatically by app/error.vue; not set via definePageMeta

error-layout:

  • Not referenced; kept in the repo

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