Appearance

Layouts ​

All layouts live in app/layouts/. Pages declare their layout with definePageMeta({ layout: 'layout-name' }).

Layout Reference ​

FileLayout nameUsed by
default.vuedefaultPassthrough — renders <NuxtPage /> directly with no shell
login-layout.vuelogin-layoutAuth pages (login, register, forgot-password, reset-password, social-login, external-verify)
collage-layout.vuecollage-layoutMain authenticated DAM pages
general-settings-layout.vuegeneral-settings-layoutWorkspace settings section
profile-layout.vueprofile-layoutAccount/profile settings section
error-auth.vueerror-authError pages shown to authenticated users
error-guest.vueerror-guestError pages shown to unauthenticated (guest) users
error-settings.vueerror-settingsError pages shown within the settings context

default Layout ​

A bare passthrough — the template is just <NuxtPage />. Used as a fallback when no other layout is declared. Pages that need a shell declare their layout explicitly; those that genuinely need no frame (e.g. certain embedded or redirect pages) can rely on default.

login-layout Layout ​

The unauthenticated shell for all auth flows. Behaviour varies by context:

  • Standard mode — renders a centered card with the workspace logo (or the Collage logo if unbranded), decorative illustrated elements on login and password-reset pages, and a "Powered by Collage" footer on the external-verify route.
  • Support platform mode — when IS_SUPPORT_PLATFORM=true, a two-column layout is rendered: the login card on the left, an <SupportIcon> illustration on the right.

Branding is resolved by useBrand() / the branding.server.ts + branding.client.ts plugins. The layout waits up to 4 seconds for branding to resolve before rendering the form, preventing a flash of the default Collage logo on white-label hosts.

The layout exposes a redirecting state via provide('redirecting', redirecting) so child auth components can suppress content during a post-login redirect.

collage-layout Layout ​

The primary shell for all authenticated DAM pages. Contains:

  • Sidebar — left navigation drawer (workspace logo, nav links, workspace switcher, mini/expanded state via useSidebarMiniState)
  • Header — top bar with alert strip and global search, shown conditionally (showCollageHeader, hideLayoutHeader, isEmbeddedHeaderPage)
  • NuxtPage — page content
  • UploadBackdrop — drag-to-upload overlay, shown while files are dragged into the window
  • MiniUploadDialog — global upload progress widget driven by damStore.uploads
  • FolderDialog — global create/move-copy folder modal (toggled via useCollageLayout)
  • ProcessingRequestOverlay — full-screen overlay for long-running API calls (>5 s)

On every route change, the layout:

  1. Runs a workspace access check via $api('check-workspace-access') and redirects if the user has lost access.
  2. Calls maybeFetchWorkspaceBranding() to lazy-load white-label branding if it was not resolved server-side.
  3. Resets the hideLayoutHeader state flag.

Dynamic Vuetify theming from workspace branding is applied by useBrandingTheme().

general-settings-layout Layout ​

Workspace settings shell. Contains:

  • Sidebar — same sidebar as collage-layout, collapsed to mini width on settings pages (the mini class is applied to .collage-main)
  • NuxtPage — settings page content
  • FolderDialog — shared global folder modal
  • ProcessingRequestOverlay — shared long-running API overlay

Workspace access is verified on mount and on each route change (same logic as collage-layout). Uses useCollageLayout() for shared state (folder dialog, move-copy flag, workspace access check).

profile-layout Layout ​

Account/profile settings shell. Contains:

  • Sidebar — same sidebar component; sidebar mini state is tracked via useSidebarMiniState
  • NuxtPage — profile page content (only rendered when isAuthenticated is true)
  • FolderDialog — shared global folder modal

Listens to the mitt bus event open-add-folder-dailog to open the folder dialog from any child page. Recovers missing workspace branding on mount if damStore.brandingDetails was not populated by SSR.

error-auth Layout ​

Minimal shell for error pages presented to authenticated users. Renders the Sidebar alongside a .collage-main content area. Used for errors that occur within a workspace context where the user is logged in.

error-guest Layout ​

Bare shell for error pages presented to unauthenticated (guest) users. Template is a single .main.full-404 wrapper around <slot /> — no sidebar, no nav. Used for 404s and other errors hit before login.

error-settings Layout ​

Shell for errors within the settings section. Renders the Sidebar with an .account-settings content card. Wraps the slot in a <v-card> with top padding.

Declaring a Layout ​

vue
<script setup lang="ts">
definePageMeta({
  layout: 'collage-layout',
  middleware: ['auth'],
})
</script>