The CWA is in heavy development

The CWA is still in alpha and not ready for production - some code and implementations are likely to change. If you would like to try out the CWA, please enjoy what we have provided and feel free to provide feedback, or get involved on GitHub.

DraftLayout

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
})

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

Basic layout

<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.

The useCwa() API

Complete reference for the Cwa class — the central access point for resources, auth, forms, admin, and site config.

Component (recommended)

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