Layouts & Pages

Layouts

A layout is the outer shell every page shares: the header, navigation, footer. You create one (or a few) layouts and every page uses one.

In the API a Layout has:

• uiComponent — the Vue file to render (CwaLayoutPrimary → app/cwa/layouts/primary.vue)
• uiClassNames — CSS class options admins can choose (e.g. light or dark theme)
• ComponentGroups — regions in the layout where components can live (e.g. a navigation region)

The module wraps your entire site in the current layout's Vue file. Your layout renders the header, then <slot /> where the page content goes, then the footer.

ComponentGroups in Layouts

A layout can have its own regions. The most common: a navigation bar area.

<!-- app/cwa/layouts/primary.vue -->
<template>
  <div>
    <header>
      <CwaComponentGroup
        reference="navigation"
        :location="$cwa.resources.layoutIri.value"
        :allowed-components="['/component/navigation_links']"
      />
    </header>
    <slot />
    <footer>...</footer>
  </div>
</template>

The reference is a stable name for this region. The location is the layout's own IRI (available from $cwa.resources.layoutIri). The allowed-components restricts what types can be added to this group.

Pages

A page defines the content structure that renders inside a layout's <slot />. It declares a uiComponent that maps to one of your page template Vue files.

Layout: CwaLayoutPrimary  →  primary.vue
  Page: PrimaryPageTemplate  →  PrimaryPageTemplate.vue
    ComponentGroup: "primary"
      ComponentPosition  →  HtmlContent component
      ComponentPosition  →  Image component

Static Pages

A static page is a one-to-one mapping: one URL → one page. The admin creates the layout structure once, adds components to the regions, and that's the page content.

Good for: Home page, About page, Contact page — anything with a fixed URL and manually managed content.

In the admin, static pages are shown in blue.

Template Pages (isTemplate: true)

A template page has no URL of its own. Instead, it's a reusable structure that many PageData records share.

Good for: Blog articles, events, team members, products — anything where the same layout is used for many data records, each with its own URL.

/blog/article-one  →  BlogArticleData  →  BlogTemplate (isTemplate page)
/blog/article-two  →  BlogArticleData  →  BlogTemplate (same template)

The template defines the layout regions. The actual content (title, body, image) comes from the PageData record.

In the admin, template pages are shown in yellow and PageData records in green — making it easy to see at a glance what is shared structure versus individual content.

Multiple Layouts

You can have several layouts for different sections of the site:

• CwaLayoutPrimary — main site layout with full header/footer
• CwaLayoutMinimal — stripped down, maybe for landing pages
• CwaLayoutDocs — sidebar navigation layout

Each is a separate Vue file in app/cwa/layouts/. Admins choose which layout a page uses from the /_cwa/pages admin area.