[{"data":1,"prerenderedAt":1237},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Fyour-first-layout":358,"\u002Fguides\u002Fyour-first-layout-surround":1232},[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":20,"badge":360,"body":363,"description":1226,"extension":1227,"links":1228,"meta":1229,"navigation":547,"path":21,"seo":1230,"stem":22,"__hash__":1231},"docs\u002F2.guides\u002F1.your-first-layout.md",{"label":361,"color":362},"Draft","amber",{"type":364,"value":365,"toc":1215},"minimark",[366,370,378,385,390,398,721,726,734,756,772,779,809,829,847,851,1003,1012,1018,1022,1030,1059,1063,1079,1084,1088,1094,1194,1200,1204,1211],[367,368,369],"p",{},"The layout is already part of the CWA data model — your job is to create the Vue file it renders through. You write one file; editors create instances with different content configurations (different nav links, different class names) and assign pages to whichever instance they want.",[367,371,372,373,377],{},"The key difference from a regular Nuxt layout: the navigation inside a CWA layout isn't hard-coded HTML. It's a ",[374,375,376],"strong",{},"component group"," — a named region that an editor fills with components at runtime. Change the nav without touching code.",[379,380,382],"callout",{"icon":381},"i-heroicons-photo",[367,383,384],{},"IMAGE: Admin panel showing a layout in edit mode, with the navigation component group visible and a + hotspot for adding navigation link components",[386,387,389],"h2",{"id":388},"the-file","The File",[367,391,392,393,397],{},"Create ",[394,395,396],"code",{},"app\u002Fcwa\u002Flayouts\u002Fprimary.vue",":",[399,400,405],"pre",{"className":401,"code":402,"language":403,"meta":404,"style":404},"language-vue shiki shiki-themes github-light github-dark material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cheader>\n      \u003Cnav>\n        \u003CCwaComponentGroup\n          reference=\"navigation\"\n          :location=\"$cwa.resources.layoutIri.value\"\n          :allowed-components=\"['\u002Fcomponent\u002Fnavigation_links']\"\n        \u002F>\n      \u003C\u002Fnav>\n    \u003C\u002Fheader>\n\n    \u003Cmain>\n      \u003Cslot \u002F>\n    \u003C\u002Fmain>\n\n    \u003Cfooter>\n      \u003Cp>My Site © {{ new Date().getFullYear() }}\u003C\u002Fp>\n    \u003C\u002Ffooter>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nuseCwaLayout()\nconst $cwa = useCwa()\n\u003C\u002Fscript>\n","vue","",[394,406,407,423,434,445,456,465,486,501,516,522,532,542,549,559,573,582,587,597,625,634,644,653,658,683,693,712],{"__ignoreMap":404},[408,409,412,416,420],"span",{"class":410,"line":411},"line",1,[408,413,415],{"class":414},"sOvfz","\u003C",[408,417,419],{"class":418},"s-h7I","template",[408,421,422],{"class":414},">\n",[408,424,426,429,432],{"class":410,"line":425},2,[408,427,428],{"class":414},"  \u003C",[408,430,431],{"class":418},"div",[408,433,422],{"class":414},[408,435,437,440,443],{"class":410,"line":436},3,[408,438,439],{"class":414},"    \u003C",[408,441,442],{"class":418},"header",[408,444,422],{"class":414},[408,446,448,451,454],{"class":410,"line":447},4,[408,449,450],{"class":414},"      \u003C",[408,452,453],{"class":418},"nav",[408,455,422],{"class":414},[408,457,459,462],{"class":410,"line":458},5,[408,460,461],{"class":414},"        \u003C",[408,463,464],{"class":418},"CwaComponentGroup\n",[408,466,468,472,475,479,483],{"class":410,"line":467},6,[408,469,471],{"class":470},"sGtlX","          reference",[408,473,474],{"class":414},"=",[408,476,478],{"class":477},"seSrl","\"",[408,480,482],{"class":481},"sLL54","navigation",[408,484,485],{"class":477},"\"\n",[408,487,489,492,494,496,499],{"class":410,"line":488},7,[408,490,491],{"class":470},"          :location",[408,493,474],{"class":414},[408,495,478],{"class":477},[408,497,498],{"class":481},"$cwa.resources.layoutIri.value",[408,500,485],{"class":477},[408,502,504,507,509,511,514],{"class":410,"line":503},8,[408,505,506],{"class":470},"          :allowed-components",[408,508,474],{"class":414},[408,510,478],{"class":477},[408,512,513],{"class":481},"['\u002Fcomponent\u002Fnavigation_links']",[408,515,485],{"class":477},[408,517,519],{"class":410,"line":518},9,[408,520,521],{"class":414},"        \u002F>\n",[408,523,525,528,530],{"class":410,"line":524},10,[408,526,527],{"class":414},"      \u003C\u002F",[408,529,453],{"class":418},[408,531,422],{"class":414},[408,533,535,538,540],{"class":410,"line":534},11,[408,536,537],{"class":414},"    \u003C\u002F",[408,539,442],{"class":418},[408,541,422],{"class":414},[408,543,545],{"class":410,"line":544},12,[408,546,548],{"emptyLinePlaceholder":547},true,"\n",[408,550,552,554,557],{"class":410,"line":551},13,[408,553,439],{"class":414},[408,555,556],{"class":418},"main",[408,558,422],{"class":414},[408,560,562,564,567,571],{"class":410,"line":561},14,[408,563,450],{"class":414},[408,565,566],{"class":418},"slot",[408,568,570],{"class":569},"s01iV"," \u002F",[408,572,422],{"class":414},[408,574,576,578,580],{"class":410,"line":575},15,[408,577,537],{"class":414},[408,579,556],{"class":418},[408,581,422],{"class":414},[408,583,585],{"class":410,"line":584},16,[408,586,548],{"emptyLinePlaceholder":547},[408,588,590,592,595],{"class":410,"line":589},17,[408,591,439],{"class":414},[408,593,594],{"class":418},"footer",[408,596,422],{"class":414},[408,598,600,602,604,607,611,615,618,621,623],{"class":410,"line":599},18,[408,601,450],{"class":414},[408,603,367],{"class":418},[408,605,606],{"class":414},">",[408,608,610],{"class":609},"sPB8G","My Site ",[408,612,614],{"class":613},"sc2zw","©",[408,616,617],{"class":609}," {{ new Date().getFullYear() }}",[408,619,620],{"class":414},"\u003C\u002F",[408,622,367],{"class":418},[408,624,422],{"class":414},[408,626,628,630,632],{"class":410,"line":627},19,[408,629,537],{"class":414},[408,631,594],{"class":418},[408,633,422],{"class":414},[408,635,637,640,642],{"class":410,"line":636},20,[408,638,639],{"class":414},"  \u003C\u002F",[408,641,431],{"class":418},[408,643,422],{"class":414},[408,645,647,649,651],{"class":410,"line":646},21,[408,648,620],{"class":414},[408,650,419],{"class":418},[408,652,422],{"class":414},[408,654,656],{"class":410,"line":655},22,[408,657,548],{"emptyLinePlaceholder":547},[408,659,661,663,666,669,672,674,676,679,681],{"class":410,"line":660},23,[408,662,415],{"class":414},[408,664,665],{"class":418},"script",[408,667,668],{"class":470}," setup",[408,670,671],{"class":470}," lang",[408,673,474],{"class":414},[408,675,478],{"class":477},[408,677,678],{"class":481},"ts",[408,680,478],{"class":477},[408,682,422],{"class":414},[408,684,686,690],{"class":410,"line":685},24,[408,687,689],{"class":688},"sKpYG","useCwaLayout",[408,691,692],{"class":609},"()\n",[408,694,696,700,703,707,710],{"class":410,"line":695},25,[408,697,699],{"class":698},"swB56","const",[408,701,702],{"class":613}," $cwa",[408,704,706],{"class":705},"sVlFx"," =",[408,708,709],{"class":688}," useCwa",[408,711,692],{"class":609},[408,713,715,717,719],{"class":410,"line":714},26,[408,716,620],{"class":414},[408,718,665],{"class":418},[408,720,422],{"class":414},[722,723,725],"h3",{"id":724},"whats-happening-here","What's happening here",[367,727,728,733],{},[374,729,730],{},[394,731,732],{},"\u003Cslot \u002F>"," — this is where the current page template renders. The module injects the page content here automatically.",[367,735,736,741,742,745,746,749,750,755],{},[374,737,738],{},[394,739,740],{},"useCwaLayout()"," — wires up the layout's style classes. When an admin selects a class option (defined in ",[394,743,744],{},"nuxt.config","), it is applied to the root element automatically. No ",[394,747,748],{},":class"," binding needed. See ",[751,752,753],"a",{"href":222},[394,754,689],{}," for the full reference.",[367,757,758,763,764,767,768,771],{},[374,759,760],{},[394,761,762],{},"useCwa()"," — gives you access to ",[394,765,766],{},"layoutIri"," and other CWA state needed for ",[394,769,770],{},"CwaComponentGroup",".",[367,773,774,778],{},[374,775,776],{},[394,777,770],{}," — marks a region in the layout where components can be placed by editors.",[780,781,782,799],"ul",{},[783,784,785,790,791,794,795,798],"li",{},[374,786,787],{},[394,788,789],{},"reference"," — a stable name for this region (e.g. ",[394,792,793],{},"\"navigation\"",", ",[394,796,797],{},"\"header-cta\"","). Must be unique within this layout.",[783,800,801,806,807,771],{},[374,802,803],{},[394,804,805],{},"location"," — the IRI of the resource that owns this group. For layout regions, always use ",[394,808,498],{},[379,810,812],{"icon":811},"i-heroicons-information-circle",[367,813,814,815,817,818,821,822,824,825,828],{},"The ",[394,816,805],{}," must be the IRI of a ",[374,819,820],{},"layout, page, or component"," — not a ComponentGroup or any other resource type. For layout regions: ",[394,823,498],{},". For page regions: ",[394,826,827],{},"props.iri"," (the IRI passed into the page template as a prop).",[780,830,831],{},[783,832,833,838,839,842,843,846],{},[374,834,835],{},[394,836,837],{},"allowed-components"," — restricts which component types editors can add. ",[394,840,841],{},"\u002Fcomponent\u002Fnavigation_links"," limits this region to ",[394,844,845],{},"NavigationLink"," components only. Omit it to allow any component type.",[386,848,850],{"id":849},"register-in-nuxtconfig","Register in nuxt.config",[399,852,855],{"className":853,"code":854,"language":678,"meta":404,"style":404},"language-ts shiki shiki-themes github-light github-dark material-theme-palenight","\u002F\u002F nuxt.config.ts\ncwa: {\n  layouts: {\n    primary: {\n      name: 'Primary Layout',\n      classes: [\n        { value: '', label: 'Default' },\n        { value: 'bg-gray-50', label: 'Light Background' },\n      ]\n    }\n  }\n}\n",[394,856,857,863,874,883,892,911,922,953,983,988,993,998],{"__ignoreMap":404},[408,858,859],{"class":410,"line":411},[408,860,862],{"class":861},"sTBSN","\u002F\u002F nuxt.config.ts\n",[408,864,865,869,871],{"class":410,"line":425},[408,866,868],{"class":867},"sRCss","cwa",[408,870,397],{"class":414},[408,872,873],{"class":414}," {\n",[408,875,876,879,881],{"class":410,"line":436},[408,877,878],{"class":867},"  layouts",[408,880,397],{"class":414},[408,882,873],{"class":414},[408,884,885,888,890],{"class":410,"line":447},[408,886,887],{"class":867},"    primary",[408,889,397],{"class":414},[408,891,873],{"class":414},[408,893,894,897,899,902,905,908],{"class":410,"line":458},[408,895,896],{"class":867},"      name",[408,898,397],{"class":414},[408,900,901],{"class":477}," '",[408,903,904],{"class":481},"Primary Layout",[408,906,907],{"class":477},"'",[408,909,910],{"class":414},",\n",[408,912,913,916,918],{"class":410,"line":467},[408,914,915],{"class":867},"      classes",[408,917,397],{"class":414},[408,919,921],{"class":920},"sDHlG"," [\n",[408,923,924,927,930,932,935,938,941,943,945,948,950],{"class":410,"line":488},[408,925,926],{"class":414},"        {",[408,928,929],{"class":920}," value",[408,931,397],{"class":414},[408,933,934],{"class":477}," ''",[408,936,937],{"class":414},",",[408,939,940],{"class":920}," label",[408,942,397],{"class":414},[408,944,901],{"class":477},[408,946,947],{"class":481},"Default",[408,949,907],{"class":477},[408,951,952],{"class":414}," },\n",[408,954,955,957,959,961,963,966,968,970,972,974,976,979,981],{"class":410,"line":503},[408,956,926],{"class":414},[408,958,929],{"class":920},[408,960,397],{"class":414},[408,962,901],{"class":477},[408,964,965],{"class":481},"bg-gray-50",[408,967,907],{"class":477},[408,969,937],{"class":414},[408,971,940],{"class":920},[408,973,397],{"class":414},[408,975,901],{"class":477},[408,977,978],{"class":481},"Light Background",[408,980,907],{"class":477},[408,982,952],{"class":414},[408,984,985],{"class":410,"line":518},[408,986,987],{"class":920},"      ]\n",[408,989,990],{"class":410,"line":524},[408,991,992],{"class":414},"    }\n",[408,994,995],{"class":410,"line":534},[408,996,997],{"class":414},"  }\n",[408,999,1000],{"class":410,"line":544},[408,1001,1002],{"class":414},"}\n",[367,1004,814,1005,1008,1009,1011],{},[394,1006,1007],{},"classes"," array defines the style options an editor can choose from for this layout. ",[394,1010,740],{}," applies the selected classes to the root element automatically.",[379,1013,1015],{"icon":1014},"i-heroicons-lock-closed",[367,1016,1017],{},"Class names are intentionally restricted to this predefined list — defined by you and your designer. This keeps the design system intact when layouts are reused across client projects and prevents unintended style drift from ad-hoc values being entered by editors.",[386,1019,1021],{"id":1020},"create-the-layout-in-the-api","Create the Layout in the API",[367,1023,1024,1025,1029],{},"The Vue file defines how a layout ",[1026,1027,1028],"em",{},"looks",", but it doesn't create a Layout record in the database. You need a record for the module to associate pages with it and for component groups (like the nav) to have an owner.",[367,1031,1032,1035,1036,1039,1040,1043,1044,1047,1048,1051,1052,1047,1055,1058],{},[374,1033,1034],{},"Naming convention:"," the ",[394,1037,1038],{},"uiComponent"," value is derived from the filename — convert to PascalCase and prefix with ",[394,1041,1042],{},"Cwa"," + resource type. ",[394,1045,1046],{},"primary.vue"," → ",[394,1049,1050],{},"CwaLayoutPrimary",". ",[394,1053,1054],{},"site-header.vue",[394,1056,1057],{},"CwaLayoutSiteHeader",". The same convention applies to page templates and components.",[722,1060,1062],{"id":1061},"via-the-admin","Via the admin",[367,1064,1065,1066,1047,1069,1072,1073,1075,1076,1078],{},"Go to ",[394,1067,1068],{},"\u002F_cwa\u002Flayouts",[374,1070,1071],{},"Create"," → set ",[394,1074,1038],{}," to ",[394,1077,1050],{},". The record is created immediately.",[379,1080,1081],{"icon":381},[367,1082,1083],{},"IMAGE: Admin create layout form with the uiComponent field set to CwaLayoutPrimary",[722,1085,1087],{"id":1086},"via-fixtures","Via fixtures",[367,1089,1090,1091,397],{},"Add the layout to your fixture scaffold and it will be created automatically on every ",[394,1092,1093],{},"doctrine:fixtures:load",[399,1095,1099],{"className":1096,"code":1097,"language":1098,"meta":404,"style":404},"language-php shiki shiki-themes github-light github-dark material-theme-palenight","\u002F\u002F api\u002Fsrc\u002FDataFixtures\u002FAppScaffold.php\npublic function build(CwaFixtureBuilder $cwa): void\n{\n    $cwa->layout('main', 'Primary');\n    $cwa->flush();\n}\n","php",[394,1100,1101,1106,1138,1143,1176,1190],{"__ignoreMap":404},[408,1102,1103],{"class":410,"line":411},[408,1104,1105],{"class":861},"\u002F\u002F api\u002Fsrc\u002FDataFixtures\u002FAppScaffold.php\n",[408,1107,1108,1111,1114,1117,1120,1124,1127,1129,1132,1134],{"class":410,"line":425},[408,1109,1110],{"class":698},"public",[408,1112,1113],{"class":698}," function",[408,1115,1116],{"class":688}," build",[408,1118,1119],{"class":414},"(",[408,1121,1123],{"class":1122},"sbW4m","CwaFixtureBuilder",[408,1125,1126],{"class":414}," $",[408,1128,868],{"class":609},[408,1130,1131],{"class":414},")",[408,1133,397],{"class":705},[408,1135,1137],{"class":1136},"stmX-"," void\n",[408,1139,1140],{"class":410,"line":436},[408,1141,1142],{"class":414},"{\n",[408,1144,1145,1148,1150,1153,1156,1158,1160,1162,1164,1166,1168,1171,1173],{"class":410,"line":447},[408,1146,1147],{"class":414},"    $",[408,1149,868],{"class":609},[408,1151,1152],{"class":705},"->",[408,1154,1155],{"class":688},"layout",[408,1157,1119],{"class":414},[408,1159,907],{"class":477},[408,1161,556],{"class":481},[408,1163,907],{"class":477},[408,1165,937],{"class":414},[408,1167,901],{"class":477},[408,1169,1170],{"class":481},"Primary",[408,1172,907],{"class":477},[408,1174,1175],{"class":414},");\n",[408,1177,1178,1180,1182,1184,1187],{"class":410,"line":458},[408,1179,1147],{"class":414},[408,1181,868],{"class":609},[408,1183,1152],{"class":705},[408,1185,1186],{"class":688},"flush",[408,1188,1189],{"class":414},"();\n",[408,1191,1192],{"class":410,"line":467},[408,1193,1002],{"class":414},[367,1195,1196,1197,1199],{},"Fixtures are the recommended approach for development — they give you a consistent, repeatable starting state, which is invaluable when switching feature branches or onboarding a new environment for a client. See ",[751,1198,125],{"href":126}," for the full scaffold API.",[386,1201,1203],{"id":1202},"next-create-a-page-template","Next: Create a Page Template",[367,1205,1206,1207,1210],{},"With a layout in place, ",[751,1208,1209],{"href":25},"create a page template"," to define the content regions for individual pages.",[1212,1213,1214],"style",{},"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 .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 .sLL54, html code.shiki .sLL54{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#C3E88D}html pre.shiki code .s01iV, html code.shiki .s01iV{--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-default:#FDAEB7;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:inherit}html pre.shiki code .sPB8G, html code.shiki .sPB8G{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#BABED8}html pre.shiki code .sc2zw, html code.shiki .sc2zw{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#BABED8}html pre.shiki code .sKpYG, html code.shiki .sKpYG{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#82AAFF}html pre.shiki code .swB56, html code.shiki .swB56{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#C792EA}html pre.shiki code .sVlFx, html code.shiki .sVlFx{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#89DDFF}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 .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 .sRCss, html code.shiki .sRCss{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#FFCB6B}html pre.shiki code .sDHlG, html code.shiki .sDHlG{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#F07178}html pre.shiki code .sbW4m, html code.shiki .sbW4m{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#FFCB6B}html pre.shiki code .stmX-, html code.shiki .stmX-{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#F78C6C}",{"title":404,"searchDepth":425,"depth":425,"links":1216},[1217,1220,1221,1225],{"id":388,"depth":425,"text":389,"children":1218},[1219],{"id":724,"depth":436,"text":725},{"id":849,"depth":425,"text":850},{"id":1020,"depth":425,"text":1021,"children":1222},[1223,1224],{"id":1061,"depth":436,"text":1062},{"id":1086,"depth":436,"text":1087},{"id":1202,"depth":425,"text":1203},"Create a layout component that wraps every page with your site header, footer, and navigation.","md",null,{},{"title":20,"description":1226},"Uj6-LVMcTP9-L6C-a2u71RXoOSmzvRd4HCvrbi_6zUc",[1233,1235],{"title":11,"path":12,"stem":13,"description":1234,"children":-1},"Scaffold a new CWA project with the interactive CLI — it picks your features, wires CI\u002FCD, and gets Docker running in one go.",{"title":24,"path":25,"stem":26,"description":1236,"children":-1},"Create a page template that defines the content regions within a layout using CwaComponentGroup.",1782512894926]