CLI Generator

cwa make:component is an interactive CLI that scaffolds a CWA component. It creates the Vue display file and prints the PHP command to generate the matching API entity.

Run it in the Nuxt app, app/ in a template project. It writes app/cwa/components/… relative to where you run it, so run from the project root it writes to app/cwa/components/, where Nuxt never looks.

cd app
npx cwa make:component

If @cwa/nuxt is listed as a dependency in your project, you can also run:

cwa make:component

Prompts

Component Name

A PascalCase identifier. This becomes the file name and directory name.

Component name (PascalCase, e.g. BlogPost): HeroBlock

Output path: app/cwa/components/HeroBlock/HeroBlock.vue inside app/, which is app/app/cwa/components/HeroBlock/HeroBlock.vue from the project root

Component Type

Selects which built-in plugin to wire up:

API Behaviours

Three yes/no prompts that control flags passed to make:api-component:

What Gets Generated

The Vue file is written to app/app/cwa/components/<Name>/<Name>.vue. The script block is pre-wired to useCwaComponent based on the chosen type:

<template>
  <!-- TODO: add your template -->
</template>

<script setup lang="ts">
import type { IriProp } from '#cwa/composables/cwa-resource'

const props = defineProps<IriProp>()
const { resource, exposeMeta } = useCwaComponent(props)
defineExpose(exposeMeta)
</script>

<template>
  <!-- TODO: add your template -->
</template>

<script setup lang="ts">
import type { IriProp } from '#cwa/composables/cwa-resource'

const props = defineProps<IriProp>()
const { resource, exposeMeta, files } = useCwaComponent(props, [withFile()])
defineExpose(exposeMeta)
</script>

<template>
  <!-- TODO: add your template -->
</template>

<script setup lang="ts">
import type { IriProp } from '#cwa/composables/cwa-resource'

const props = defineProps<IriProp>()
const { resource, exposeMeta, collectionItems, pageModel, totalPages, goToNextPage, goToPreviousPage, changePage, resolveResourceLink } =
  useCwaComponent(props, [withCollection()])
defineExpose(exposeMeta)
</script>

Next Steps Printed After Generation

After writing the file, the CLI prints the PHP command to create the API entity. Run it in your API project:

php bin/console make:api-component HeroBlock --timestamped --publishable

It also says to register the component type in nuxt.config.ts under cwa.resources. That step is optional. Every component in app/app/cwa/components/ is discovered automatically and appears in the admin's "Add Component" dialog under a name derived from its directory (HeroBlock → "Hero Block"). Add an entry only to change that name or set a description, instantAdd or defaultData; see Component Files › Part 3: nuxt.config Registration.

What the CLI Does Not Generate

• The admin editing tab (admin/<Name>.vue) — write this manually following the Your First Component guide
• A nuxt.config entry, which is optional

Related

• Your First Component — full walkthrough including the admin tab
• useCwaComponent — composable reference
• Images & Media — withFile() guide
• Collections & Pagination — withCollection() guide