cwa make:component

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.

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

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/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, contentUrl, displayMedia, handleLoad, loaded } =
  useCwaComponent(props, [withImage()])
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 two reminders:

1. Create the API entity — run in your API project:

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

2. Register in nuxt.config.ts — add the component type under cwa.resources:

// nuxt.config.ts
export default defineNuxtConfig({
  cwa: {
    resources: {
      HeroBlock: {
        name: 'Hero Block',
        description: 'Full-width hero with headline and CTA'
      }
    }
  }
})

What the CLI does not generate

• The admin editing tab (admin/<Name>.vue) — write this manually following the Your First Component guide
• The nuxt.config entry — printed as a reminder but not written automatically

Related

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