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.

DraftCwa Layer

Admin Panel

The built-in CWA admin — pages, edit mode, the resource manager, and how to extend it with custom manager tabs.

The CWA admin panel is shipped as part of the layer and requires no setup. It becomes accessible at /_cwa for any user with ROLE_ADMIN.

Admin Routes

Route	Purpose
`/_cwa`	Dashboard
`/_cwa/pages`	Browse, create, and edit page records
`/_cwa/layouts`	Browse and edit layout records
`/_cwa/routes`	Manage routes — path, name, publish state
`/_cwa/data`	Browse any resource by type; drill into individual records
`/_cwa/data/[type]`	List view for a specific resource type
`/_cwa/data/[type]/[iri]`	Edit view for a single resource
`/_cwa/settings`	Site config, SEO settings, maintenance mode, robots
`/_cwa/users`	List and manage user accounts
`/_cwa/users/[iri]`	Edit an individual user

All /_cwa routes are client-only (SSR disabled) and guarded by middleware: 'admin'.

Edit Mode

When an admin visits a content page, an edit bar appears at the top of the page (rendered by <CwaAdminHeader>). Clicking "Edit" toggles edit mode:

const cwa = useCwa()

cwa.admin.isEditing.value        // whether edit mode is active
cwa.admin.toggleEdit()           // open/close edit mode

In edit mode, every rendered component gains a selection overlay. Clicking a component opens its resource manager panel (<CwaAdminResourceManager>).

The Resource Manager

The resource manager is a panel that slides in when a component is selected. It shows tabs for editing the component's data fields. The standard tabs are provided by the bundle (e.g. general fields, styles). Custom tabs are added using useCwaResourceManagerTab.

Custom Manager Tab

Create a Vue component in app/cwa/components/[ComponentName]/admin/[TabName].vue. Use useCwaResourceManagerTab to register it:

<!-- app/cwa/components/Title/admin/SEO.vue -->
<template>
    <div class="p-4 space-y-4">
        <CwaUiFormInput
            v-model="metaTitleModel"
            label="Meta Title"
            placeholder="Override page title for search engines"
        />
    </div>
</template>

<script setup lang="ts">
import { toRef } from 'vue'
import type { IriProp } from '@cwa/nuxt/runtime/composables'
import { useCwaResourceManagerTab, useCwaResourceModel } from '#imports'

const props = defineProps<IriProp>()

useCwaResourceManagerTab({ name: 'SEO', order: 10 })

const metaTitleModel = useCwaResourceModel(toRef(props, 'iri'), 'metaTitle')
</script>

The tab appears in the resource manager whenever a Title component is selected.

`cwa.admin` API

Member	Type	Description
`isEditing`	`ComputedRef<boolean>`	Whether edit mode is active
`toggleEdit(state?)`	`(boolean?) => void`	Toggle or set edit mode
`emptyStack()`	`() => void`	Deselect the current component
`emitRedraw()`	`() => void`	Force re-render of all component overlays
`navigationDisabled`	`ComputedRef<boolean>`	Whether the navigation guard is blocking

Navigation Guard

When a component has unsaved changes, the admin navigation guard blocks route changes and shows a confirmation dialog. It runs automatically — you don't configure it.

To disable the guard programmatically (e.g. after a save):

cwa.admin.setNavigationGuardDisabled(true)

Auth Pages

The auth pages the CWA layer provides automatically, their composables, and how to override each one with your own design.

Docker

The Docker Compose setup for local development and production — services, environment variables, volumes, and build workflow.