[{"data":1,"prerenderedAt":1381},["ShallowReactive",2],{"navigation":3,"\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcwa-cli":358,"\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcwa-cli-surround":1376},[4,14,36,69,140,341],{"title":5,"path":6,"stem":7,"children":8},"Introduction","\u002Fgetting-started","1.getting-started\u002F1.index",[9,10],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":15,"path":16,"stem":17,"children":18,"page":35},"Guides","\u002Fguides","2.guides",[19,23,27,31],{"title":20,"path":21,"stem":22},"Your First Layout","\u002Fguides\u002Fyour-first-layout","2.guides\u002F1.your-first-layout",{"title":24,"path":25,"stem":26},"Your First Page Template","\u002Fguides\u002Fyour-first-page-template","2.guides\u002F2.your-first-page-template",{"title":28,"path":29,"stem":30},"Your First Component","\u002Fguides\u002Fyour-first-component","2.guides\u002F3.your-first-component",{"title":32,"path":33,"stem":34},"Alternative UI Variants","\u002Fguides\u002Falternative-ui-variants","2.guides\u002F4.alternative-ui-variants",false,{"title":37,"path":38,"stem":39,"children":40,"page":35},"Core Concepts","\u002Fcore-concepts","3.core-concepts",[41,45,49,53,57,61,65],{"title":42,"path":43,"stem":44},"How It All Works","\u002Fcore-concepts\u002Farchitecture","3.core-concepts\u002F1.architecture",{"title":46,"path":47,"stem":48},"The Data Model","\u002Fcore-concepts\u002Fthe-data-model","3.core-concepts\u002F2.the-data-model",{"title":50,"path":51,"stem":52},"Layouts & Pages","\u002Fcore-concepts\u002Flayouts-and-pages","3.core-concepts\u002F3.layouts-and-pages",{"title":54,"path":55,"stem":56},"Dynamic Pages","\u002Fcore-concepts\u002Fdynamic-pages","3.core-concepts\u002F4.dynamic-pages",{"title":58,"path":59,"stem":60},"Components","\u002Fcore-concepts\u002Fcomponents","3.core-concepts\u002F5.components",{"title":62,"path":63,"stem":64},"Draft & Publish Workflow","\u002Fcore-concepts\u002Fdraft-and-publish","3.core-concepts\u002F6.draft-and-publish",{"title":66,"path":67,"stem":68},"The Admin Panel","\u002Fcore-concepts\u002Fadmin-panel","3.core-concepts\u002F7.admin-panel",{"title":70,"path":71,"stem":72,"children":73,"page":35},"Api","\u002Fapi","4.api",[74,78,116,120,124,128,132,136],{"title":75,"path":76,"stem":77},"Bundle Setup","\u002Fapi\u002Fbundle-setup","4.api\u002F1.bundle-setup",{"title":58,"path":79,"stem":80,"children":81,"page":35},"\u002Fapi\u002Fcomponents","4.api\u002F2.components",[82,86,103],{"title":83,"path":84,"stem":85},"Creating Components","\u002Fapi\u002Fcomponents\u002Fcreating-components","4.api\u002F2.components\u002F1.creating-components",{"title":87,"path":88,"stem":89,"children":90,"page":35},"Annotations","\u002Fapi\u002Fcomponents\u002Fannotations","4.api\u002F2.components\u002F2.annotations",[91,95,99],{"title":92,"path":93,"stem":94},"Publishable","\u002Fapi\u002Fcomponents\u002Fannotations\u002Fpublishable","4.api\u002F2.components\u002F2.annotations\u002F1.publishable",{"title":96,"path":97,"stem":98},"Uploadable","\u002Fapi\u002Fcomponents\u002Fannotations\u002Fuploadable","4.api\u002F2.components\u002F2.annotations\u002F2.uploadable",{"title":100,"path":101,"stem":102},"Timestamped","\u002Fapi\u002Fcomponents\u002Fannotations\u002Ftimestamped","4.api\u002F2.components\u002F2.annotations\u002F3.timestamped",{"title":104,"path":105,"stem":106,"children":107,"page":35},"Built Ins","\u002Fapi\u002Fcomponents\u002Fbuilt-ins","4.api\u002F2.components\u002F3.built-ins",[108,112],{"title":109,"path":110,"stem":111},"Collection Component","\u002Fapi\u002Fcomponents\u002Fbuilt-ins\u002Fcollection-component","4.api\u002F2.components\u002F3.built-ins\u002F1.collection-component",{"title":113,"path":114,"stem":115},"Form Component","\u002Fapi\u002Fcomponents\u002Fbuilt-ins\u002Fform-component","4.api\u002F2.components\u002F3.built-ins\u002F2.form-component",{"title":117,"path":118,"stem":119},"Dynamic & Nested Pages","\u002Fapi\u002Fdynamic-pages","4.api\u002F3.dynamic-pages",{"title":121,"path":122,"stem":123},"Users & Security","\u002Fapi\u002Fusers-and-security","4.api\u002F4.users-and-security",{"title":125,"path":126,"stem":127},"Data Fixtures","\u002Fapi\u002Fdata-fixtures","4.api\u002F5.data-fixtures",{"title":129,"path":130,"stem":131},"Configuration Reference","\u002Fapi\u002Fconfiguration","4.api\u002F6.configuration",{"title":133,"path":134,"stem":135},"Console Commands","\u002Fapi\u002Fconsole-commands","4.api\u002F7.console-commands",{"title":137,"path":138,"stem":139},"Debugging & Profiler","\u002Fapi\u002Fdebugging","4.api\u002F8.debugging",{"title":141,"path":142,"stem":143,"children":144,"page":35},"Nuxt Module","\u002Fnuxt-module","5.nuxt-module",[145,149,162,182,207,211,295,320,324],{"title":146,"path":147,"stem":148},"Module Setup","\u002Fnuxt-module\u002Fmodule-setup","5.nuxt-module\u002F1.module-setup",{"title":150,"path":151,"stem":152,"children":153,"page":35},"Configuration","\u002Fnuxt-module\u002Fconfiguration","5.nuxt-module\u002F2.configuration",[154,158],{"title":155,"path":156,"stem":157},"Nuxt Config","\u002Fnuxt-module\u002Fconfiguration\u002Fnuxt-config","5.nuxt-module\u002F2.configuration\u002F1.nuxt-config",{"title":159,"path":160,"stem":161},"Site Config & SEO","\u002Fnuxt-module\u002Fconfiguration\u002Fsite-config-and-seo","5.nuxt-module\u002F2.configuration\u002F2.site-config-and-seo",{"title":163,"path":164,"stem":165,"children":166,"page":35},"Building Your Ui","\u002Fnuxt-module\u002Fbuilding-your-ui","5.nuxt-module\u002F3.building-your-ui",[167,171,175,178],{"title":168,"path":169,"stem":170},"Layouts","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-layouts","5.nuxt-module\u002F3.building-your-ui\u002F1.creating-layouts",{"title":172,"path":173,"stem":174},"Page Templates","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-page-templates","5.nuxt-module\u002F3.building-your-ui\u002F2.creating-page-templates",{"title":83,"path":176,"stem":177},"\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-components","5.nuxt-module\u002F3.building-your-ui\u002F3.creating-components",{"title":179,"path":180,"stem":181},"CLI Generator","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcwa-cli","5.nuxt-module\u002F3.building-your-ui\u002F4.cwa-cli",{"title":183,"path":184,"stem":185,"children":186,"page":35},"Cwa Components","\u002Fnuxt-module\u002Fcwa-components","5.nuxt-module\u002F4.cwa-components",[187,191,195,199,203],{"title":188,"path":189,"stem":190},"\u003CCwaComponentGroup \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-component-group","5.nuxt-module\u002F4.cwa-components\u002F1.cwa-component-group",{"title":192,"path":193,"stem":194},"\u003CCwaPage \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-page","5.nuxt-module\u002F4.cwa-components\u002F2.cwa-page",{"title":196,"path":197,"stem":198},"\u003CCwaLink \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-link","5.nuxt-module\u002F4.cwa-components\u002F3.cwa-link",{"title":200,"path":201,"stem":202},"\u003CCwaImage \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-image","5.nuxt-module\u002F4.cwa-components\u002F4.cwa-image",{"title":204,"path":205,"stem":206},"\u003CCwaDefaultLayout \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-default-layout","5.nuxt-module\u002F4.cwa-components\u002F5.cwa-default-layout",{"title":208,"path":209,"stem":210},"The useCwa() API","\u002Fnuxt-module\u002Fcwa-api","5.nuxt-module\u002F5.cwa-api",{"title":212,"path":213,"stem":214,"children":215,"page":35},"Composables","\u002Fnuxt-module\u002Fcomposables","5.nuxt-module\u002F6.composables",[216,224,261,278],{"title":217,"path":218,"stem":219,"children":220,"page":35},"Layout","\u002Fnuxt-module\u002Fcomposables\u002Flayout","5.nuxt-module\u002F6.composables\u002F0.layout",[221],{"title":217,"path":222,"stem":223},"\u002Fnuxt-module\u002Fcomposables\u002Flayout\u002Fuse-cwa-layout","5.nuxt-module\u002F6.composables\u002F0.layout\u002F1.use-cwa-layout",{"title":225,"path":226,"stem":227,"children":228,"page":35},"Component","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent","5.nuxt-module\u002F6.composables\u002F1.component",[229,233,237,241,245,249,253,257],{"title":230,"path":231,"stem":232},"Component (recommended)","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-component","5.nuxt-module\u002F6.composables\u002F1.component\u002F0.use-cwa-component",{"title":234,"path":235,"stem":236},"Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F1.use-cwa-resource",{"title":238,"path":239,"stem":240},"Collection Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-collection-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F2.use-cwa-collection-resource",{"title":242,"path":243,"stem":244},"Image Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-image-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F3.use-cwa-image-resource",{"title":246,"path":247,"stem":248},"Form","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form","5.nuxt-module\u002F6.composables\u002F1.component\u002F4.use-cwa-form",{"title":250,"path":251,"stem":252},"Form Input","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-input","5.nuxt-module\u002F6.composables\u002F1.component\u002F5.use-cwa-form-input",{"title":254,"path":255,"stem":256},"Form Repeated","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-repeated","5.nuxt-module\u002F6.composables\u002F1.component\u002F6.use-cwa-form-repeated",{"title":258,"path":259,"stem":260},"Form Collection","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-collection","5.nuxt-module\u002F6.composables\u002F1.component\u002F7.use-cwa-form-collection",{"title":262,"path":263,"stem":264,"children":265,"page":35},"Admin Manager","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager","5.nuxt-module\u002F6.composables\u002F2.admin-manager",[266,270,274],{"title":267,"path":268,"stem":269},"Manager Tab","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-manager-tab","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F1.use-cwa-resource-manager-tab",{"title":271,"path":272,"stem":273},"Resource Model","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-model","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F2.use-cwa-resource-model",{"title":275,"path":276,"stem":277},"Resource Upload","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-upload","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F3.use-cwa-resource-upload",{"title":279,"path":280,"stem":281,"children":282,"page":35},"Utilities","\u002Fnuxt-module\u002Fcomposables\u002Futilities","5.nuxt-module\u002F6.composables\u002F3.utilities",[283,287,291],{"title":284,"path":285,"stem":286},"Resource Endpoint","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-cwa-resource-endpoint","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F1.use-cwa-resource-endpoint",{"title":288,"path":289,"stem":290},"Query Model","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-query-bound-model","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F2.use-query-bound-model",{"title":292,"path":293,"stem":294},"Resource Route","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-cwa-resource-route","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F3.use-cwa-resource-route",{"title":296,"path":297,"stem":298,"children":299,"page":35},"Component Helpers","\u002Fnuxt-module\u002Fcomponent-helpers","5.nuxt-module\u002F7.component-helpers",[300,304,308,312,316],{"title":301,"path":302,"stem":303},"Images & Media","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fimages-and-uploads","5.nuxt-module\u002F7.component-helpers\u002F1.images-and-uploads",{"title":305,"path":306,"stem":307},"Collections & Pagination","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fcollections-and-pagination","5.nuxt-module\u002F7.component-helpers\u002F2.collections-and-pagination",{"title":309,"path":310,"stem":311},"HTML Content","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fhtml-content","5.nuxt-module\u002F7.component-helpers\u002F3.html-content",{"title":313,"path":314,"stem":315},"Real-Time Updates","\u002Fnuxt-module\u002Fcomponent-helpers\u002Freal-time-updates","5.nuxt-module\u002F7.component-helpers\u002F4.real-time-updates",{"title":317,"path":318,"stem":319},"Forms","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fforms","5.nuxt-module\u002F7.component-helpers\u002F5.forms",{"title":321,"path":322,"stem":323},"Authentication","\u002Fnuxt-module\u002Fauthentication","5.nuxt-module\u002F8.authentication",{"title":325,"path":326,"stem":327,"children":328,"page":35},"Cwa Layer","\u002Fnuxt-module\u002Fcwa-layer","5.nuxt-module\u002F9.cwa-layer",[329,333,337],{"title":330,"path":331,"stem":332},"Overview","\u002Fnuxt-module\u002Fcwa-layer\u002Foverview","5.nuxt-module\u002F9.cwa-layer\u002F1.overview",{"title":334,"path":335,"stem":336},"Auth Pages","\u002Fnuxt-module\u002Fcwa-layer\u002Fauth-pages","5.nuxt-module\u002F9.cwa-layer\u002F2.auth-pages",{"title":338,"path":339,"stem":340},"Admin Panel","\u002Fnuxt-module\u002Fcwa-layer\u002Fadmin-panel","5.nuxt-module\u002F9.cwa-layer\u002F3.admin-panel",{"title":342,"path":343,"stem":344,"children":345,"page":35},"Deployment","\u002Fdeployment","6.deployment",[346,350,354],{"title":347,"path":348,"stem":349},"Docker","\u002Fdeployment\u002Fdocker","6.deployment\u002F1.docker",{"title":351,"path":352,"stem":353},"Kubernetes & Helm","\u002Fdeployment\u002Fkubernetes","6.deployment\u002F2.kubernetes",{"title":355,"path":356,"stem":357},"CI\u002FCD","\u002Fdeployment\u002Fci-cd","6.deployment\u002F3.ci-cd",{"id":359,"title":360,"badge":361,"body":364,"description":1369,"extension":1370,"links":1371,"meta":1372,"navigation":1373,"path":180,"seo":1374,"stem":181,"__hash__":1375},"docs\u002F5.nuxt-module\u002F3.building-your-ui\u002F4.cwa-cli.md","cwa make:component",{"label":362,"color":363},"Draft","amber",{"type":365,"value":366,"toc":1358},"minimark",[367,374,399,406,418,423,428,431,439,445,449,452,522,526,533,604,608,619,1139,1143,1146,1152,1178,1187,1299,1303,1325,1329,1354],[368,369,370,373],"p",{},[371,372,360],"code",{}," 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.",[375,376,381],"pre",{"className":377,"code":378,"language":379,"meta":380,"style":380},"language-bash shiki shiki-themes github-light github-dark material-theme-palenight","npx cwa make:component\n","bash","",[371,382,383],{"__ignoreMap":380},[384,385,388,392,396],"span",{"class":386,"line":387},"line",1,[384,389,391],{"class":390},"sRCss","npx",[384,393,395],{"class":394},"sLL54"," cwa",[384,397,398],{"class":394}," make:component\n",[368,400,401,402,405],{},"If ",[371,403,404],{},"@cwa\u002Fnuxt"," is listed as a dependency in your project, you can also run:",[375,407,409],{"className":377,"code":408,"language":379,"meta":380,"style":380},"cwa make:component\n",[371,410,411],{"__ignoreMap":380},[384,412,413,416],{"class":386,"line":387},[384,414,415],{"class":390},"cwa",[384,417,398],{"class":394},[419,420,422],"h2",{"id":421},"prompts","Prompts",[424,425,427],"h3",{"id":426},"component-name","Component name",[368,429,430],{},"A PascalCase identifier. This becomes the file name and directory name.",[375,432,437],{"className":433,"code":435,"language":436},[434],"language-text","Component name (PascalCase, e.g. BlogPost): HeroBlock\n","text",[371,438,435],{"__ignoreMap":380},[368,440,441,442],{},"Output path: ",[371,443,444],{},"app\u002Fcwa\u002Fcomponents\u002FHeroBlock\u002FHeroBlock.vue",[424,446,448],{"id":447},"component-type","Component type",[368,450,451],{},"Selects which built-in plugin to wire up:",[453,454,455,471],"table",{},[456,457,458],"thead",{},[459,460,461,465,468],"tr",{},[462,463,464],"th",{},"Choice",[462,466,467],{},"Plugin",[462,469,470],{},"Use when",[472,473,474,488,507],"tbody",{},[459,475,476,482,485],{},[477,478,479],"td",{},[371,480,481],{},"Basic",[477,483,484],{},"none",[477,486,487],{},"Plain data display",[459,489,490,495,500],{},[477,491,492],{},[371,493,494],{},"Image",[477,496,497],{},[371,498,499],{},"withImage()",[477,501,502,503,506],{},"Entity has ",[371,504,505],{},"#[Uploadable]"," (file\u002Fimage)",[459,508,509,514,519],{},[477,510,511],{},[371,512,513],{},"Collection",[477,515,516],{},[371,517,518],{},"withCollection()",[477,520,521],{},"Entity extends or wraps a collection",[424,523,525],{"id":524},"api-behaviours","API behaviours",[368,527,528,529,532],{},"Three yes\u002Fno prompts that control flags passed to ",[371,530,531],{},"make:api-component",":",[453,534,535,548],{},[456,536,537],{},[459,538,539,542,545],{},[462,540,541],{},"Prompt",[462,543,544],{},"Flag",[462,546,547],{},"What it adds",[472,549,550,571,585],{},[459,551,552,557,561],{},[477,553,554],{},[371,555,556],{},"--timestamped",[477,558,559],{},[371,560,556],{},[477,562,563,566,567,570],{},[371,564,565],{},"createdAt"," \u002F ",[371,568,569],{},"updatedAt"," columns",[459,572,573,578,582],{},[477,574,575],{},[371,576,577],{},"--publishable",[477,579,580],{},[371,581,577],{},[477,583,584],{},"Draft \u002F publish lifecycle",[459,586,587,592,596],{},[477,588,589],{},[371,590,591],{},"--uploadable",[477,593,594],{},[371,595,591],{},[477,597,598,599,603],{},"File upload field (defaults to ",[600,601,602],"strong",{},"yes"," for Image type)",[419,605,607],{"id":606},"what-gets-generated","What gets generated",[368,609,610,611,614,615,618],{},"The Vue file is written to ",[371,612,613],{},"app\u002Fcwa\u002Fcomponents\u002F\u003CName>\u002F\u003CName>.vue",". The script block is pre-wired to ",[371,616,617],{},"useCwaComponent"," based on the chosen type:",[620,621,622,806,968],"code-group",{},[375,623,627],{"className":624,"code":625,"filename":481,"language":626,"meta":380,"style":380},"language-vue shiki shiki-themes github-light github-dark material-theme-palenight","\u003Ctemplate>\n  \u003C!-- TODO: add your template -->\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport type { IriProp } from '#cwa\u002Fcomposables\u002Fcwa-resource'\n\nconst props = defineProps\u003CIriProp>()\nconst { resource, exposeMeta } = useCwaComponent(props)\ndefineExpose(exposeMeta)\n\u003C\u002Fscript>\n","vue",[371,628,629,642,649,659,666,695,727,732,762,788,797],{"__ignoreMap":380},[384,630,631,635,639],{"class":386,"line":387},[384,632,634],{"class":633},"sOvfz","\u003C",[384,636,638],{"class":637},"s-h7I","template",[384,640,641],{"class":633},">\n",[384,643,645],{"class":386,"line":644},2,[384,646,648],{"class":647},"sTBSN","  \u003C!-- TODO: add your template -->\n",[384,650,652,655,657],{"class":386,"line":651},3,[384,653,654],{"class":633},"\u003C\u002F",[384,656,638],{"class":637},[384,658,641],{"class":633},[384,660,662],{"class":386,"line":661},4,[384,663,665],{"emptyLinePlaceholder":664},true,"\n",[384,667,669,671,674,678,681,684,688,691,693],{"class":386,"line":668},5,[384,670,634],{"class":633},[384,672,673],{"class":637},"script",[384,675,677],{"class":676},"sGtlX"," setup",[384,679,680],{"class":676}," lang",[384,682,683],{"class":633},"=",[384,685,687],{"class":686},"seSrl","\"",[384,689,690],{"class":394},"ts",[384,692,687],{"class":686},[384,694,641],{"class":633},[384,696,698,702,705,708,712,715,718,721,724],{"class":386,"line":697},6,[384,699,701],{"class":700},"sm4w6","import",[384,703,704],{"class":700}," type",[384,706,707],{"class":633}," {",[384,709,711],{"class":710},"sPB8G"," IriProp",[384,713,714],{"class":633}," }",[384,716,717],{"class":700}," from",[384,719,720],{"class":686}," '",[384,722,723],{"class":394},"#cwa\u002Fcomposables\u002Fcwa-resource",[384,725,726],{"class":686},"'\n",[384,728,730],{"class":386,"line":729},7,[384,731,665],{"emptyLinePlaceholder":664},[384,733,735,739,743,747,751,753,756,759],{"class":386,"line":734},8,[384,736,738],{"class":737},"swB56","const",[384,740,742],{"class":741},"sc2zw"," props",[384,744,746],{"class":745},"sVlFx"," =",[384,748,750],{"class":749},"sKpYG"," defineProps",[384,752,634],{"class":633},[384,754,755],{"class":390},"IriProp",[384,757,758],{"class":633},">",[384,760,761],{"class":710},"()\n",[384,763,765,767,769,772,775,778,780,782,785],{"class":386,"line":764},9,[384,766,738],{"class":737},[384,768,707],{"class":633},[384,770,771],{"class":741}," resource",[384,773,774],{"class":633},",",[384,776,777],{"class":741}," exposeMeta",[384,779,714],{"class":633},[384,781,746],{"class":745},[384,783,784],{"class":749}," useCwaComponent",[384,786,787],{"class":710},"(props)\n",[384,789,791,794],{"class":386,"line":790},10,[384,792,793],{"class":749},"defineExpose",[384,795,796],{"class":710},"(exposeMeta)\n",[384,798,800,802,804],{"class":386,"line":799},11,[384,801,654],{"class":633},[384,803,673],{"class":637},[384,805,641],{"class":633},[375,807,809],{"className":624,"code":808,"filename":494,"language":626,"meta":380,"style":380},"\u003Ctemplate>\n  \u003C!-- TODO: add your template -->\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport type { IriProp } from '#cwa\u002Fcomposables\u002Fcwa-resource'\n\nconst props = defineProps\u003CIriProp>()\nconst { resource, exposeMeta, contentUrl, displayMedia, handleLoad, loaded } =\n  useCwaComponent(props, [withImage()])\ndefineExpose(exposeMeta)\n\u003C\u002Fscript>\n",[371,810,811,819,823,831,835,855,875,879,897,934,953,959],{"__ignoreMap":380},[384,812,813,815,817],{"class":386,"line":387},[384,814,634],{"class":633},[384,816,638],{"class":637},[384,818,641],{"class":633},[384,820,821],{"class":386,"line":644},[384,822,648],{"class":647},[384,824,825,827,829],{"class":386,"line":651},[384,826,654],{"class":633},[384,828,638],{"class":637},[384,830,641],{"class":633},[384,832,833],{"class":386,"line":661},[384,834,665],{"emptyLinePlaceholder":664},[384,836,837,839,841,843,845,847,849,851,853],{"class":386,"line":668},[384,838,634],{"class":633},[384,840,673],{"class":637},[384,842,677],{"class":676},[384,844,680],{"class":676},[384,846,683],{"class":633},[384,848,687],{"class":686},[384,850,690],{"class":394},[384,852,687],{"class":686},[384,854,641],{"class":633},[384,856,857,859,861,863,865,867,869,871,873],{"class":386,"line":697},[384,858,701],{"class":700},[384,860,704],{"class":700},[384,862,707],{"class":633},[384,864,711],{"class":710},[384,866,714],{"class":633},[384,868,717],{"class":700},[384,870,720],{"class":686},[384,872,723],{"class":394},[384,874,726],{"class":686},[384,876,877],{"class":386,"line":729},[384,878,665],{"emptyLinePlaceholder":664},[384,880,881,883,885,887,889,891,893,895],{"class":386,"line":734},[384,882,738],{"class":737},[384,884,742],{"class":741},[384,886,746],{"class":745},[384,888,750],{"class":749},[384,890,634],{"class":633},[384,892,755],{"class":390},[384,894,758],{"class":633},[384,896,761],{"class":710},[384,898,899,901,903,905,907,909,911,914,916,919,921,924,926,929,931],{"class":386,"line":764},[384,900,738],{"class":737},[384,902,707],{"class":633},[384,904,771],{"class":741},[384,906,774],{"class":633},[384,908,777],{"class":741},[384,910,774],{"class":633},[384,912,913],{"class":741}," contentUrl",[384,915,774],{"class":633},[384,917,918],{"class":741}," displayMedia",[384,920,774],{"class":633},[384,922,923],{"class":741}," handleLoad",[384,925,774],{"class":633},[384,927,928],{"class":741}," loaded",[384,930,714],{"class":633},[384,932,933],{"class":745}," =\n",[384,935,936,939,942,944,947,950],{"class":386,"line":790},[384,937,938],{"class":749},"  useCwaComponent",[384,940,941],{"class":710},"(props",[384,943,774],{"class":633},[384,945,946],{"class":710}," [",[384,948,949],{"class":749},"withImage",[384,951,952],{"class":710},"()])\n",[384,954,955,957],{"class":386,"line":799},[384,956,793],{"class":749},[384,958,796],{"class":710},[384,960,962,964,966],{"class":386,"line":961},12,[384,963,654],{"class":633},[384,965,673],{"class":637},[384,967,641],{"class":633},[375,969,971],{"className":624,"code":970,"filename":513,"language":626,"meta":380,"style":380},"\u003Ctemplate>\n  \u003C!-- TODO: add your template -->\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport type { IriProp } from '#cwa\u002Fcomposables\u002Fcwa-resource'\n\nconst props = defineProps\u003CIriProp>()\nconst { resource, exposeMeta, collectionItems, pageModel, totalPages, goToNextPage, goToPreviousPage, changePage, resolveResourceLink } =\n  useCwaComponent(props, [withCollection()])\ndefineExpose(exposeMeta)\n\u003C\u002Fscript>\n",[371,972,973,981,985,993,997,1017,1037,1041,1059,1110,1125,1131],{"__ignoreMap":380},[384,974,975,977,979],{"class":386,"line":387},[384,976,634],{"class":633},[384,978,638],{"class":637},[384,980,641],{"class":633},[384,982,983],{"class":386,"line":644},[384,984,648],{"class":647},[384,986,987,989,991],{"class":386,"line":651},[384,988,654],{"class":633},[384,990,638],{"class":637},[384,992,641],{"class":633},[384,994,995],{"class":386,"line":661},[384,996,665],{"emptyLinePlaceholder":664},[384,998,999,1001,1003,1005,1007,1009,1011,1013,1015],{"class":386,"line":668},[384,1000,634],{"class":633},[384,1002,673],{"class":637},[384,1004,677],{"class":676},[384,1006,680],{"class":676},[384,1008,683],{"class":633},[384,1010,687],{"class":686},[384,1012,690],{"class":394},[384,1014,687],{"class":686},[384,1016,641],{"class":633},[384,1018,1019,1021,1023,1025,1027,1029,1031,1033,1035],{"class":386,"line":697},[384,1020,701],{"class":700},[384,1022,704],{"class":700},[384,1024,707],{"class":633},[384,1026,711],{"class":710},[384,1028,714],{"class":633},[384,1030,717],{"class":700},[384,1032,720],{"class":686},[384,1034,723],{"class":394},[384,1036,726],{"class":686},[384,1038,1039],{"class":386,"line":729},[384,1040,665],{"emptyLinePlaceholder":664},[384,1042,1043,1045,1047,1049,1051,1053,1055,1057],{"class":386,"line":734},[384,1044,738],{"class":737},[384,1046,742],{"class":741},[384,1048,746],{"class":745},[384,1050,750],{"class":749},[384,1052,634],{"class":633},[384,1054,755],{"class":390},[384,1056,758],{"class":633},[384,1058,761],{"class":710},[384,1060,1061,1063,1065,1067,1069,1071,1073,1076,1078,1081,1083,1086,1088,1091,1093,1096,1098,1101,1103,1106,1108],{"class":386,"line":764},[384,1062,738],{"class":737},[384,1064,707],{"class":633},[384,1066,771],{"class":741},[384,1068,774],{"class":633},[384,1070,777],{"class":741},[384,1072,774],{"class":633},[384,1074,1075],{"class":741}," collectionItems",[384,1077,774],{"class":633},[384,1079,1080],{"class":741}," pageModel",[384,1082,774],{"class":633},[384,1084,1085],{"class":741}," totalPages",[384,1087,774],{"class":633},[384,1089,1090],{"class":741}," goToNextPage",[384,1092,774],{"class":633},[384,1094,1095],{"class":741}," goToPreviousPage",[384,1097,774],{"class":633},[384,1099,1100],{"class":741}," changePage",[384,1102,774],{"class":633},[384,1104,1105],{"class":741}," resolveResourceLink",[384,1107,714],{"class":633},[384,1109,933],{"class":745},[384,1111,1112,1114,1116,1118,1120,1123],{"class":386,"line":790},[384,1113,938],{"class":749},[384,1115,941],{"class":710},[384,1117,774],{"class":633},[384,1119,946],{"class":710},[384,1121,1122],{"class":749},"withCollection",[384,1124,952],{"class":710},[384,1126,1127,1129],{"class":386,"line":799},[384,1128,793],{"class":749},[384,1130,796],{"class":710},[384,1132,1133,1135,1137],{"class":386,"line":961},[384,1134,654],{"class":633},[384,1136,673],{"class":637},[384,1138,641],{"class":633},[419,1140,1142],{"id":1141},"next-steps-printed-after-generation","Next steps printed after generation",[368,1144,1145],{},"After writing the file, the CLI prints two reminders:",[368,1147,1148,1151],{},[600,1149,1150],{},"1. Create the API entity"," — run in your API project:",[375,1153,1155],{"className":377,"code":1154,"language":379,"meta":380,"style":380},"php bin\u002Fconsole make:api-component HeroBlock --timestamped --publishable\n",[371,1156,1157],{"__ignoreMap":380},[384,1158,1159,1162,1165,1168,1171,1175],{"class":386,"line":387},[384,1160,1161],{"class":390},"php",[384,1163,1164],{"class":394}," bin\u002Fconsole",[384,1166,1167],{"class":394}," make:api-component",[384,1169,1170],{"class":394}," HeroBlock",[384,1172,1174],{"class":1173},"szhYu"," --timestamped",[384,1176,1177],{"class":1173}," --publishable\n",[368,1179,1180,1183,1184,532],{},[600,1181,1182],{},"2. Register in nuxt.config.ts"," — add the component type under ",[371,1185,1186],{},"cwa.resources",[375,1188,1191],{"className":1189,"code":1190,"language":690,"meta":380,"style":380},"language-ts shiki shiki-themes github-light github-dark material-theme-palenight","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  cwa: {\n    resources: {\n      HeroBlock: {\n        name: 'Hero Block',\n        description: 'Full-width hero with headline and CTA'\n      }\n    }\n  }\n})\n",[371,1192,1193,1198,1215,1226,1235,1244,1262,1276,1281,1286,1291],{"__ignoreMap":380},[384,1194,1195],{"class":386,"line":387},[384,1196,1197],{"class":647},"\u002F\u002F nuxt.config.ts\n",[384,1199,1200,1203,1206,1209,1212],{"class":386,"line":644},[384,1201,1202],{"class":700},"export",[384,1204,1205],{"class":700}," default",[384,1207,1208],{"class":749}," defineNuxtConfig",[384,1210,1211],{"class":710},"(",[384,1213,1214],{"class":633},"{\n",[384,1216,1217,1221,1223],{"class":386,"line":651},[384,1218,1220],{"class":1219},"sDHlG","  cwa",[384,1222,532],{"class":633},[384,1224,1225],{"class":633}," {\n",[384,1227,1228,1231,1233],{"class":386,"line":661},[384,1229,1230],{"class":1219},"    resources",[384,1232,532],{"class":633},[384,1234,1225],{"class":633},[384,1236,1237,1240,1242],{"class":386,"line":668},[384,1238,1239],{"class":1219},"      HeroBlock",[384,1241,532],{"class":633},[384,1243,1225],{"class":633},[384,1245,1246,1249,1251,1253,1256,1259],{"class":386,"line":697},[384,1247,1248],{"class":1219},"        name",[384,1250,532],{"class":633},[384,1252,720],{"class":686},[384,1254,1255],{"class":394},"Hero Block",[384,1257,1258],{"class":686},"'",[384,1260,1261],{"class":633},",\n",[384,1263,1264,1267,1269,1271,1274],{"class":386,"line":729},[384,1265,1266],{"class":1219},"        description",[384,1268,532],{"class":633},[384,1270,720],{"class":686},[384,1272,1273],{"class":394},"Full-width hero with headline and CTA",[384,1275,726],{"class":686},[384,1277,1278],{"class":386,"line":734},[384,1279,1280],{"class":633},"      }\n",[384,1282,1283],{"class":386,"line":764},[384,1284,1285],{"class":633},"    }\n",[384,1287,1288],{"class":386,"line":790},[384,1289,1290],{"class":633},"  }\n",[384,1292,1293,1296],{"class":386,"line":799},[384,1294,1295],{"class":633},"}",[384,1297,1298],{"class":710},")\n",[419,1300,1302],{"id":1301},"what-the-cli-does-not-generate","What the CLI does not generate",[1304,1305,1306,1318],"ul",{},[1307,1308,1309,1310,1313,1314,1317],"li",{},"The admin editing tab (",[371,1311,1312],{},"admin\u002F\u003CName>.vue",") — write this manually following the ",[1315,1316,28],"a",{"href":29}," guide",[1307,1319,1320,1321,1324],{},"The ",[371,1322,1323],{},"nuxt.config"," entry — printed as a reminder but not written automatically",[419,1326,1328],{"id":1327},"related","Related",[1304,1330,1331,1336,1341,1348],{},[1307,1332,1333,1335],{},[1315,1334,28],{"href":29}," — full walkthrough including the admin tab",[1307,1337,1338,1340],{},[1315,1339,617],{"href":231}," — composable reference",[1307,1342,1343,1345,1346,1317],{},[1315,1344,301],{"href":302}," — ",[371,1347,499],{},[1307,1349,1350,1345,1352,1317],{},[1315,1351,305],{"href":306},[371,1353,518],{},[1355,1356,1357],"style",{},"html pre.shiki code .sRCss, html code.shiki .sRCss{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#FFCB6B}html pre.shiki code .sLL54, html code.shiki .sLL54{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sOvfz, html code.shiki .sOvfz{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#89DDFF}html pre.shiki code .s-h7I, html code.shiki .s-h7I{--shiki-light:#22863A;--shiki-default:#85E89D;--shiki-dark:#F07178}html pre.shiki code .sTBSN, html code.shiki .sTBSN{--shiki-light:#6A737D;--shiki-light-font-style:inherit;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sGtlX, html code.shiki .sGtlX{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#C792EA}html pre.shiki code .seSrl, html code.shiki .seSrl{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#89DDFF}html pre.shiki code .sm4w6, html code.shiki .sm4w6{--shiki-light:#D73A49;--shiki-light-font-style:inherit;--shiki-default:#F97583;--shiki-default-font-style:inherit;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sPB8G, html code.shiki .sPB8G{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#BABED8}html pre.shiki code .swB56, html code.shiki .swB56{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#C792EA}html pre.shiki code .sc2zw, html code.shiki .sc2zw{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#BABED8}html pre.shiki code .sVlFx, html code.shiki .sVlFx{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#89DDFF}html pre.shiki code .sKpYG, html code.shiki .sKpYG{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#82AAFF}html pre.shiki code .szhYu, html code.shiki .szhYu{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#C3E88D}html pre.shiki code .sDHlG, html code.shiki .sDHlG{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#F07178}",{"title":380,"searchDepth":644,"depth":644,"links":1359},[1360,1365,1366,1367,1368],{"id":421,"depth":644,"text":422,"children":1361},[1362,1363,1364],{"id":426,"depth":651,"text":427},{"id":447,"depth":651,"text":448},{"id":524,"depth":651,"text":525},{"id":606,"depth":644,"text":607},{"id":1141,"depth":644,"text":1142},{"id":1301,"depth":644,"text":1302},{"id":1327,"depth":644,"text":1328},"Scaffold a new CWA display component from the command line — generates the Vue file with the correct useCwaComponent boilerplate and prints the matching API command.","md",null,{},{"title":179},{"title":360,"description":1369},"dCVDgzguJ9RKffjBuTjiaCymYfQ59LkwGXJIfirMLOw",[1377,1379],{"title":83,"path":176,"stem":177,"description":1378,"children":-1},"The complete guide to building a CWA component — display template, admin manager tabs, and UI class name variants.",{"title":188,"path":189,"stem":190,"description":1380,"children":-1},"Render an ordered list of CMS-managed components within a named region of your layout, page, or component.",1782512895925]