<CwaDefaultLayout />
<CwaDefaultLayout> is the fallback layout CWA uses when the current page has no Layout resource, its Layout resource has no uiComponent value, or that value names a component the app doesn't register.
You will rarely use this directly. It exists so that CWA can always render something — even for pages that haven't been fully configured in the CMS yet.
uiComponent holds a name that doesn't resolve (for example after renaming or deleting a layout file), CWA falls back here and shows a warning naming the missing component. See Renaming or Deleting a Layout.Structure
It renders a minimal full-height flex column:
<div id="cwa:default-layout" class="cwa:flex cwa:flex-col cwa:h-full">
<slot />
</div>
CWA's own utility classes are namespaced with the cwa: prefix so they never collide with your Tailwind build. The default <slot /> is where <CwaPage /> renders the current page template.
When It Appears
- A new CWA project before any layouts have been created in the admin
- A page whose
Layoutrecord has an emptyuiComponent - A page whose
Layoutrecord names a layout component that no longer exists - During development when you're building a layout component but haven't connected it in the CMS yet
Replacing It
Create the layout file in app/cwa/layouts/ — that's what makes the component resolvable. Once the CMS has a Layout record whose uiComponent is the registered component name (CwaLayoutPrimary for Primary.vue), <CwaDefaultLayout> is no longer used for that page.
<!-- app/cwa/layouts/Primary.vue -->
<template>
<div class="min-h-screen">
<AppHeader />
<slot />
<AppFooter />
</div>
</template>
Registering the layout in nuxt.config.ts → cwa.layouts is optional — it only adds a display name and style options in the admin.
// nuxt.config.ts
cwa: {
layouts: {
Primary: { name: 'Primary Layout' }
}
}