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.