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

The Admin Panel

An overview of the built-in inline CMS — how admins manage layouts, pages, components and site settings without leaving the website.

The CWA has no separate CMS URL. Editing happens on the live page — the admin bar overlays the front end, and the manager panel slides up from the bottom when you click a component.

Access

Log in at /login with ROLE_ADMIN credentials. Once logged in, the admin bar appears at the top of every page.

The Admin Bar

The bar shows:

  • Edit / Done toggle — activates inline editing mode
  • Navigation links: Layouts | Pages | Data | Routes | Users | Settings
  • A page title input for the current page
  • A loading indicator for API activity

Edit Mode

When edit mode is active:

  • Hotspots appear at the top and bottom of every ComponentGroup — click one to open the "Add Component" dialog
  • Click any component to select it and open the manager panel
  • The manager panel slides up from the bottom and shows your component's admin tabs
  • Right-click a component in the live page layout (not in the /_cwa/ admin pages) for context menu actions: move, delete, duplicate

The Admin Pages (/_cwa/)

URLPurpose
/_cwa/layoutsList layouts; create new; assign uiComponent
/_cwa/pagesList pages; assign layout and page template
/_cwa/pages/[iri]Page settings: title, SEO, layout
/_cwa/dataBrowse PageData categories (blog, products, events…)
/_cwa/data/[type]List and create records for a data type
/_cwa/data/[type]/[iri]Edit an individual data record
/_cwa/routesManage URL paths; create redirects; view the route tree
/_cwa/usersList users; create/edit accounts and roles
/_cwa/settingsSite config: name, SEO defaults, robots, sitemap, maintenance mode

Managing Routes

The /_cwa/routes admin page manages URL paths for pages and redirects.

Editing a path

The path editor uses a prefix + suffix layout. For top-level routes the prefix is empty and you type the full slug. For child routes (e.g. a blog article nested under /blog) the parent path is shown as a read-only prefix — you only type the suffix. This makes it clear what the final URL will be without having to remember the parent path.

An SEO recommendation appears below the input showing a full path preview built from the parent prefix and a slugified version of the page title. Click it to apply.

When editing a parent route that has child routes, a cascade child paths option appears. Enabling it renames all child paths to keep them under the new parent prefix and creates 301 redirects from every old path automatically. Without it only the parent route is renamed; children keep their old paths.

Child route creation and path editing are disabled when the parent route has no path yet. Assign a path to the parent first.

Redirects

Each route entry shows two sections:

Forward visitors to — the outbound redirect field. Set this to send visitors arriving at this URL to a different destination. When a redirect target is set and edit mode is active, the admin panel suppresses the redirect so the page remains navigable for editing.

Incoming redirects — the redirectedFrom list. Shows all other routes that currently forward visitors to this route. Useful for auditing redirect chains and identifying stale paths.

Adding a Component

  1. Enter edit mode
  2. Click a + hotspot at the edge of a component group
  3. The "Add Component" dialog lists available component types
  4. Select one — if instantAdd: true is set in nuxt.config, it's added immediately; otherwise a config panel appears first
  5. The new component is added to the group

Reordering

Drag components within a group to reorder them. The module patches sortValue on each ComponentPosition automatically.

The Manager Panel

When you click a component, the manager panel shows all admin/*.vue files for that component type as tabs. Each tab is defined by a call to useCwaResourceManagerTab({ name: 'Tab Name' }) in the Vue file.

Changes in the admin tabs apply to the draft version of the component. Click Publish in the panel to make changes live.