CWA 2 is a prerelease (2.0.0-alpha), heading for a beta. It runs production sites; configuration can still change between releases, always with upgrade notes. View versions and support

Layout

useCwaLayout

Access the current layout resource and auto-apply style classes to the layout's root element.

The standard composable for CWA layout files. Returns the active layout resource and automatically applies uiClassNames to the layout's root element — no manual :class binding needed.

const { layout } = useCwaLayout()

Signature

useCwaLayout(opts?: {
  autoClass?: boolean  // default true
})

Parameters

Parameter	Type	Description
`opts.autoClass`	`boolean`	Apply `uiClassNames` to the layout's root element. Default `true`

Return Values

Return	Type	Purpose
`layout`	`ComputedRef<Resource \| undefined>`	The active layout resource — access data on `.value?.data`
`uiClassNames`	`ComputedRef<string[] \| undefined>`	The selected style classes — auto-applied to the root element by default

Example

<template>
  <div>
    <header>
      <CwaComponentGroup reference="nav" :location="$cwa.resources.layoutIri.value" />
    </header>
    <main><slot /></main>
  </div>
</template>

<script setup lang="ts">
const { layout } = useCwaLayout()
</script>

Style classes defined in nuxt.config → cwa.layouts are applied automatically to the root <div> when an admin selects them. No :class binding needed.

Applying Classes to an Inner Element

To apply style classes to an element other than the root, pass autoClass: false and bind uiClassNames manually:

<template>
  <div>
    <main :class="uiClassNames"><slot /></main>
  </div>
</template>

<script setup lang="ts">
const { layout, uiClassNames } = useCwaLayout({ autoClass: false })
</script>

Accessing Layout Data

const { layout } = useCwaLayout()

// layout.value?.data holds the layout entity fields
const title = computed(() => layout.value?.data?.title)

See Your First Layout for the full setup guide.

Overview

Which CWA composable to use for a layout, a display component, a form, an admin tab, an auth page or a utility.

Component (recommended)

The recommended entry point for all CWA display components — fetch resource data, expose to the admin manager, and compose plugins for collections, uploaded files, or custom behaviour.