[{"data":1,"prerenderedAt":1272},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Fyour-first-layout":342,"\u002Fguides\u002Fyour-first-layout-surround":1267},[4,14,36,69,140,325],{"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,178,203,207,279,304,308],{"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],{"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,"children":182,"page":35},"Cwa Components","\u002Fnuxt-module\u002Fcwa-components","5.nuxt-module\u002F4.cwa-components",[183,187,191,195,199],{"title":184,"path":185,"stem":186},"\u003CCwaComponentGroup \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-component-group","5.nuxt-module\u002F4.cwa-components\u002F1.cwa-component-group",{"title":188,"path":189,"stem":190},"\u003CCwaPage \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-page","5.nuxt-module\u002F4.cwa-components\u002F2.cwa-page",{"title":192,"path":193,"stem":194},"\u003CCwaLink \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-link","5.nuxt-module\u002F4.cwa-components\u002F3.cwa-link",{"title":196,"path":197,"stem":198},"\u003CCwaImage \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-image","5.nuxt-module\u002F4.cwa-components\u002F4.cwa-image",{"title":200,"path":201,"stem":202},"\u003CCwaDefaultLayout \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-default-layout","5.nuxt-module\u002F4.cwa-components\u002F5.cwa-default-layout",{"title":204,"path":205,"stem":206},"The useCwa() API","\u002Fnuxt-module\u002Fcwa-api","5.nuxt-module\u002F5.cwa-api",{"title":208,"path":209,"stem":210,"children":211,"page":35},"Composables","\u002Fnuxt-module\u002Fcomposables","5.nuxt-module\u002F6.composables",[212,245,262],{"title":213,"path":214,"stem":215,"children":216,"page":35},"Component","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent","5.nuxt-module\u002F6.composables\u002F1.component",[217,221,225,229,233,237,241],{"title":218,"path":219,"stem":220},"Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F1.use-cwa-resource",{"title":222,"path":223,"stem":224},"Collection Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-collection-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F2.use-cwa-collection-resource",{"title":226,"path":227,"stem":228},"Image Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-image-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F3.use-cwa-image-resource",{"title":230,"path":231,"stem":232},"Form","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form","5.nuxt-module\u002F6.composables\u002F1.component\u002F4.use-cwa-form",{"title":234,"path":235,"stem":236},"Form Input","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-input","5.nuxt-module\u002F6.composables\u002F1.component\u002F5.use-cwa-form-input",{"title":238,"path":239,"stem":240},"Form Repeated","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-repeated","5.nuxt-module\u002F6.composables\u002F1.component\u002F6.use-cwa-form-repeated",{"title":242,"path":243,"stem":244},"Form Collection","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-collection","5.nuxt-module\u002F6.composables\u002F1.component\u002F7.use-cwa-form-collection",{"title":246,"path":247,"stem":248,"children":249,"page":35},"Admin Manager","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager","5.nuxt-module\u002F6.composables\u002F2.admin-manager",[250,254,258],{"title":251,"path":252,"stem":253},"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":255,"path":256,"stem":257},"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":259,"path":260,"stem":261},"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":263,"path":264,"stem":265,"children":266,"page":35},"Utilities","\u002Fnuxt-module\u002Fcomposables\u002Futilities","5.nuxt-module\u002F6.composables\u002F3.utilities",[267,271,275],{"title":268,"path":269,"stem":270},"Resource Endpoint","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-cwa-resource-endpoint","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F1.use-cwa-resource-endpoint",{"title":272,"path":273,"stem":274},"Query Model","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-query-bound-model","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F2.use-query-bound-model",{"title":276,"path":277,"stem":278},"Resource Route","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-cwa-resource-route","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F3.use-cwa-resource-route",{"title":280,"path":281,"stem":282,"children":283,"page":35},"Component Helpers","\u002Fnuxt-module\u002Fcomponent-helpers","5.nuxt-module\u002F7.component-helpers",[284,288,292,296,300],{"title":285,"path":286,"stem":287},"Images & Media","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fimages-and-uploads","5.nuxt-module\u002F7.component-helpers\u002F1.images-and-uploads",{"title":289,"path":290,"stem":291},"Collections & Pagination","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fcollections-and-pagination","5.nuxt-module\u002F7.component-helpers\u002F2.collections-and-pagination",{"title":293,"path":294,"stem":295},"HTML Content","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fhtml-content","5.nuxt-module\u002F7.component-helpers\u002F3.html-content",{"title":297,"path":298,"stem":299},"Real-Time Updates","\u002Fnuxt-module\u002Fcomponent-helpers\u002Freal-time-updates","5.nuxt-module\u002F7.component-helpers\u002F4.real-time-updates",{"title":301,"path":302,"stem":303},"Forms","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fforms","5.nuxt-module\u002F7.component-helpers\u002F5.forms",{"title":305,"path":306,"stem":307},"Authentication","\u002Fnuxt-module\u002Fauthentication","5.nuxt-module\u002F8.authentication",{"title":309,"path":310,"stem":311,"children":312,"page":35},"Cwa Layer","\u002Fnuxt-module\u002Fcwa-layer","5.nuxt-module\u002F9.cwa-layer",[313,317,321],{"title":314,"path":315,"stem":316},"Overview","\u002Fnuxt-module\u002Fcwa-layer\u002Foverview","5.nuxt-module\u002F9.cwa-layer\u002F1.overview",{"title":318,"path":319,"stem":320},"Auth Pages","\u002Fnuxt-module\u002Fcwa-layer\u002Fauth-pages","5.nuxt-module\u002F9.cwa-layer\u002F2.auth-pages",{"title":322,"path":323,"stem":324},"Admin Panel","\u002Fnuxt-module\u002Fcwa-layer\u002Fadmin-panel","5.nuxt-module\u002F9.cwa-layer\u002F3.admin-panel",{"title":326,"path":327,"stem":328,"children":329,"page":35},"Deployment","\u002Fdeployment","6.deployment",[330,334,338],{"title":331,"path":332,"stem":333},"Docker","\u002Fdeployment\u002Fdocker","6.deployment\u002F1.docker",{"title":335,"path":336,"stem":337},"Kubernetes & Helm","\u002Fdeployment\u002Fkubernetes","6.deployment\u002F2.kubernetes",{"title":339,"path":340,"stem":341},"CI\u002FCD","\u002Fdeployment\u002Fci-cd","6.deployment\u002F3.ci-cd",{"id":343,"title":20,"badge":344,"body":347,"description":1261,"extension":1262,"links":1263,"meta":1264,"navigation":531,"path":21,"seo":1265,"stem":22,"__hash__":1266},"docs\u002F2.guides\u002F1.your-first-layout.md",{"label":345,"color":346},"Draft","amber",{"type":348,"value":349,"toc":1250},"minimark",[350,354,362,369,374,382,724,729,737,753,761,792,812,830,834,985,995,1048,1054,1058,1066,1095,1099,1115,1120,1124,1130,1228,1235,1239,1246],[351,352,353],"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.",[351,355,356,357,361],{},"The key difference from a regular Nuxt layout: the navigation inside a CWA layout isn't hard-coded HTML. It's a ",[358,359,360],"strong",{},"component group"," — a named region that an editor fills with components at runtime. Change the nav without touching code.",[363,364,366],"callout",{"icon":365},"i-heroicons-photo",[351,367,368],{},"IMAGE: Admin panel showing a layout in edit mode, with the navigation component group visible and a + hotspot for adding navigation link components",[370,371,373],"h2",{"id":372},"the-file","The File",[351,375,376,377,381],{},"Create ",[378,379,380],"code",{},"app\u002Fcwa\u002Flayouts\u002Fprimary.vue",":",[383,384,389],"pre",{"className":385,"code":386,"language":387,"meta":388,"style":388},"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\">\nimport { useCwa } from '#imports'\nconst $cwa = useCwa()\n\u003C\u002Fscript>\n","vue","",[378,390,391,407,418,429,440,449,470,485,500,506,516,526,533,543,557,566,571,581,609,618,628,637,642,667,695,715],{"__ignoreMap":388},[392,393,396,400,404],"span",{"class":394,"line":395},"line",1,[392,397,399],{"class":398},"sOvfz","\u003C",[392,401,403],{"class":402},"s-h7I","template",[392,405,406],{"class":398},">\n",[392,408,410,413,416],{"class":394,"line":409},2,[392,411,412],{"class":398},"  \u003C",[392,414,415],{"class":402},"div",[392,417,406],{"class":398},[392,419,421,424,427],{"class":394,"line":420},3,[392,422,423],{"class":398},"    \u003C",[392,425,426],{"class":402},"header",[392,428,406],{"class":398},[392,430,432,435,438],{"class":394,"line":431},4,[392,433,434],{"class":398},"      \u003C",[392,436,437],{"class":402},"nav",[392,439,406],{"class":398},[392,441,443,446],{"class":394,"line":442},5,[392,444,445],{"class":398},"        \u003C",[392,447,448],{"class":402},"CwaComponentGroup\n",[392,450,452,456,459,463,467],{"class":394,"line":451},6,[392,453,455],{"class":454},"sGtlX","          reference",[392,457,458],{"class":398},"=",[392,460,462],{"class":461},"seSrl","\"",[392,464,466],{"class":465},"sLL54","navigation",[392,468,469],{"class":461},"\"\n",[392,471,473,476,478,480,483],{"class":394,"line":472},7,[392,474,475],{"class":454},"          :location",[392,477,458],{"class":398},[392,479,462],{"class":461},[392,481,482],{"class":465},"$cwa.resources.layoutIri.value",[392,484,469],{"class":461},[392,486,488,491,493,495,498],{"class":394,"line":487},8,[392,489,490],{"class":454},"          :allowed-components",[392,492,458],{"class":398},[392,494,462],{"class":461},[392,496,497],{"class":465},"['\u002Fcomponent\u002Fnavigation_links']",[392,499,469],{"class":461},[392,501,503],{"class":394,"line":502},9,[392,504,505],{"class":398},"        \u002F>\n",[392,507,509,512,514],{"class":394,"line":508},10,[392,510,511],{"class":398},"      \u003C\u002F",[392,513,437],{"class":402},[392,515,406],{"class":398},[392,517,519,522,524],{"class":394,"line":518},11,[392,520,521],{"class":398},"    \u003C\u002F",[392,523,426],{"class":402},[392,525,406],{"class":398},[392,527,529],{"class":394,"line":528},12,[392,530,532],{"emptyLinePlaceholder":531},true,"\n",[392,534,536,538,541],{"class":394,"line":535},13,[392,537,423],{"class":398},[392,539,540],{"class":402},"main",[392,542,406],{"class":398},[392,544,546,548,551,555],{"class":394,"line":545},14,[392,547,434],{"class":398},[392,549,550],{"class":402},"slot",[392,552,554],{"class":553},"s01iV"," \u002F",[392,556,406],{"class":398},[392,558,560,562,564],{"class":394,"line":559},15,[392,561,521],{"class":398},[392,563,540],{"class":402},[392,565,406],{"class":398},[392,567,569],{"class":394,"line":568},16,[392,570,532],{"emptyLinePlaceholder":531},[392,572,574,576,579],{"class":394,"line":573},17,[392,575,423],{"class":398},[392,577,578],{"class":402},"footer",[392,580,406],{"class":398},[392,582,584,586,588,591,595,599,602,605,607],{"class":394,"line":583},18,[392,585,434],{"class":398},[392,587,351],{"class":402},[392,589,590],{"class":398},">",[392,592,594],{"class":593},"sPB8G","My Site ",[392,596,598],{"class":597},"sc2zw","©",[392,600,601],{"class":593}," {{ new Date().getFullYear() }}",[392,603,604],{"class":398},"\u003C\u002F",[392,606,351],{"class":402},[392,608,406],{"class":398},[392,610,612,614,616],{"class":394,"line":611},19,[392,613,521],{"class":398},[392,615,578],{"class":402},[392,617,406],{"class":398},[392,619,621,624,626],{"class":394,"line":620},20,[392,622,623],{"class":398},"  \u003C\u002F",[392,625,415],{"class":402},[392,627,406],{"class":398},[392,629,631,633,635],{"class":394,"line":630},21,[392,632,604],{"class":398},[392,634,403],{"class":402},[392,636,406],{"class":398},[392,638,640],{"class":394,"line":639},22,[392,641,532],{"emptyLinePlaceholder":531},[392,643,645,647,650,653,656,658,660,663,665],{"class":394,"line":644},23,[392,646,399],{"class":398},[392,648,649],{"class":402},"script",[392,651,652],{"class":454}," setup",[392,654,655],{"class":454}," lang",[392,657,458],{"class":398},[392,659,462],{"class":461},[392,661,662],{"class":465},"ts",[392,664,462],{"class":461},[392,666,406],{"class":398},[392,668,670,674,677,680,683,686,689,692],{"class":394,"line":669},24,[392,671,673],{"class":672},"sm4w6","import",[392,675,676],{"class":398}," {",[392,678,679],{"class":593}," useCwa",[392,681,682],{"class":398}," }",[392,684,685],{"class":672}," from",[392,687,688],{"class":461}," '",[392,690,691],{"class":465},"#imports",[392,693,694],{"class":461},"'\n",[392,696,698,702,705,709,712],{"class":394,"line":697},25,[392,699,701],{"class":700},"swB56","const",[392,703,704],{"class":597}," $cwa",[392,706,708],{"class":707},"sVlFx"," =",[392,710,679],{"class":711},"sKpYG",[392,713,714],{"class":593},"()\n",[392,716,718,720,722],{"class":394,"line":717},26,[392,719,604],{"class":398},[392,721,649],{"class":402},[392,723,406],{"class":398},[725,726,728],"h3",{"id":727},"whats-happening-here","What's happening here",[351,730,731,736],{},[358,732,733],{},[378,734,735],{},"\u003Cslot \u002F>"," — this is where the current page template renders. The module injects the page content here automatically.",[351,738,739,744,745,748,749,752],{},[358,740,741],{},[378,742,743],{},"useCwa()"," — gives you access to the current layout's resource data: ",[378,746,747],{},"layoutIri"," (the IRI of the active layout record) and ",[378,750,751],{},"layout.value?.data"," (its fields).",[351,754,755,760],{},[358,756,757],{},[378,758,759],{},"CwaComponentGroup"," — marks a region in the layout where components can be placed by editors.",[762,763,764,781],"ul",{},[765,766,767,772,773,776,777,780],"li",{},[358,768,769],{},[378,770,771],{},"reference"," — a stable name for this region (e.g. ",[378,774,775],{},"\"navigation\"",", ",[378,778,779],{},"\"header-cta\"","). Must be unique within this layout.",[765,782,783,788,789,791],{},[358,784,785],{},[378,786,787],{},"location"," — the IRI of the resource that owns this group. For layout regions, always use ",[378,790,482],{},".",[363,793,795],{"icon":794},"i-heroicons-information-circle",[351,796,797,798,800,801,804,805,807,808,811],{},"The ",[378,799,787],{}," must be the IRI of a ",[358,802,803],{},"layout, page, or component"," — not a ComponentGroup or any other resource type. For layout regions: ",[378,806,482],{},". For page regions: ",[378,809,810],{},"props.iri"," (the IRI passed into the page template as a prop).",[762,813,814],{},[765,815,816,821,822,825,826,829],{},[358,817,818],{},[378,819,820],{},"allowed-components"," — restricts which component types editors can add. ",[378,823,824],{},"\u002Fcomponent\u002Fnavigation_links"," limits this region to ",[378,827,828],{},"NavigationLink"," components only. Omit it to allow any component type.",[370,831,833],{"id":832},"register-in-nuxtconfig","Register in nuxt.config",[383,835,838],{"className":836,"code":837,"language":662,"meta":388,"style":388},"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",[378,839,840,846,857,866,875,893,904,935,965,970,975,980],{"__ignoreMap":388},[392,841,842],{"class":394,"line":395},[392,843,845],{"class":844},"sTBSN","\u002F\u002F nuxt.config.ts\n",[392,847,848,852,854],{"class":394,"line":409},[392,849,851],{"class":850},"sRCss","cwa",[392,853,381],{"class":398},[392,855,856],{"class":398}," {\n",[392,858,859,862,864],{"class":394,"line":420},[392,860,861],{"class":850},"  layouts",[392,863,381],{"class":398},[392,865,856],{"class":398},[392,867,868,871,873],{"class":394,"line":431},[392,869,870],{"class":850},"    primary",[392,872,381],{"class":398},[392,874,856],{"class":398},[392,876,877,880,882,884,887,890],{"class":394,"line":442},[392,878,879],{"class":850},"      name",[392,881,381],{"class":398},[392,883,688],{"class":461},[392,885,886],{"class":465},"Primary Layout",[392,888,889],{"class":461},"'",[392,891,892],{"class":398},",\n",[392,894,895,898,900],{"class":394,"line":451},[392,896,897],{"class":850},"      classes",[392,899,381],{"class":398},[392,901,903],{"class":902},"sDHlG"," [\n",[392,905,906,909,912,914,917,920,923,925,927,930,932],{"class":394,"line":472},[392,907,908],{"class":398},"        {",[392,910,911],{"class":902}," value",[392,913,381],{"class":398},[392,915,916],{"class":461}," ''",[392,918,919],{"class":398},",",[392,921,922],{"class":902}," label",[392,924,381],{"class":398},[392,926,688],{"class":461},[392,928,929],{"class":465},"Default",[392,931,889],{"class":461},[392,933,934],{"class":398}," },\n",[392,936,937,939,941,943,945,948,950,952,954,956,958,961,963],{"class":394,"line":487},[392,938,908],{"class":398},[392,940,911],{"class":902},[392,942,381],{"class":398},[392,944,688],{"class":461},[392,946,947],{"class":465},"bg-gray-50",[392,949,889],{"class":461},[392,951,919],{"class":398},[392,953,922],{"class":902},[392,955,381],{"class":398},[392,957,688],{"class":461},[392,959,960],{"class":465},"Light Background",[392,962,889],{"class":461},[392,964,934],{"class":398},[392,966,967],{"class":394,"line":502},[392,968,969],{"class":902},"      ]\n",[392,971,972],{"class":394,"line":508},[392,973,974],{"class":398},"    }\n",[392,976,977],{"class":394,"line":518},[392,978,979],{"class":398},"  }\n",[392,981,982],{"class":394,"line":528},[392,983,984],{"class":398},"}\n",[351,986,797,987,990,991,994],{},[378,988,989],{},"classes"," array defines the style options an editor can choose from for this layout. The selected value is stored on the layout record as ",[378,992,993],{},"uiClassNames"," and you apply it to the root element of your Vue file:",[383,996,998],{"className":385,"code":997,"language":387,"meta":388,"style":388},"\u003Cdiv :class=\"$cwa.resources.layout.value?.data?.uiClassNames\">\n",[378,999,1000],{"__ignoreMap":388},[392,1001,1002,1004,1006,1009,1012,1014,1016,1019,1021,1024,1026,1029,1031,1034,1037,1040,1042,1044,1046],{"class":394,"line":395},[392,1003,399],{"class":398},[392,1005,415],{"class":402},[392,1007,1008],{"class":398}," :",[392,1010,1011],{"class":454},"class",[392,1013,458],{"class":398},[392,1015,462],{"class":461},[392,1017,1018],{"class":593},"$cwa",[392,1020,791],{"class":398},[392,1022,1023],{"class":593},"resources",[392,1025,791],{"class":398},[392,1027,1028],{"class":593},"layout",[392,1030,791],{"class":398},[392,1032,1033],{"class":593},"value",[392,1035,1036],{"class":398},"?.",[392,1038,1039],{"class":593},"data",[392,1041,1036],{"class":398},[392,1043,993],{"class":593},[392,1045,462],{"class":461},[392,1047,406],{"class":398},[363,1049,1051],{"icon":1050},"i-heroicons-lock-closed",[351,1052,1053],{},"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.",[370,1055,1057],{"id":1056},"create-the-layout-in-the-api","Create the Layout in the API",[351,1059,1060,1061,1065],{},"The Vue file defines how a layout ",[1062,1063,1064],"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.",[351,1067,1068,1071,1072,1075,1076,1079,1080,1083,1084,1087,1088,1083,1091,1094],{},[358,1069,1070],{},"Naming convention:"," the ",[378,1073,1074],{},"uiComponent"," value is derived from the filename — convert to PascalCase and prefix with ",[378,1077,1078],{},"Cwa"," + resource type. ",[378,1081,1082],{},"primary.vue"," → ",[378,1085,1086],{},"CwaLayoutPrimary",". ",[378,1089,1090],{},"site-header.vue",[378,1092,1093],{},"CwaLayoutSiteHeader",". The same convention applies to page templates and components.",[725,1096,1098],{"id":1097},"via-the-admin","Via the admin",[351,1100,1101,1102,1083,1105,1108,1109,1111,1112,1114],{},"Go to ",[378,1103,1104],{},"\u002F_cwa\u002Flayouts",[358,1106,1107],{},"Create"," → set ",[378,1110,1074],{}," to ",[378,1113,1086],{},". The record is created immediately.",[363,1116,1117],{"icon":365},[351,1118,1119],{},"IMAGE: Admin create layout form with the uiComponent field set to CwaLayoutPrimary",[725,1121,1123],{"id":1122},"via-fixtures","Via fixtures",[351,1125,1126,1127,381],{},"Add the layout to your fixture scaffold and it will be created automatically on every ",[378,1128,1129],{},"doctrine:fixtures:load",[383,1131,1135],{"className":1132,"code":1133,"language":1134,"meta":388,"style":388},"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', 'CwaLayoutPrimary');\n    $cwa->flush();\n}\n","php",[378,1136,1137,1142,1174,1179,1210,1224],{"__ignoreMap":388},[392,1138,1139],{"class":394,"line":395},[392,1140,1141],{"class":844},"\u002F\u002F api\u002Fsrc\u002FDataFixtures\u002FAppScaffold.php\n",[392,1143,1144,1147,1150,1153,1156,1160,1163,1165,1168,1170],{"class":394,"line":409},[392,1145,1146],{"class":700},"public",[392,1148,1149],{"class":700}," function",[392,1151,1152],{"class":711}," build",[392,1154,1155],{"class":398},"(",[392,1157,1159],{"class":1158},"sbW4m","CwaFixtureBuilder",[392,1161,1162],{"class":398}," $",[392,1164,851],{"class":593},[392,1166,1167],{"class":398},")",[392,1169,381],{"class":707},[392,1171,1173],{"class":1172},"stmX-"," void\n",[392,1175,1176],{"class":394,"line":420},[392,1177,1178],{"class":398},"{\n",[392,1180,1181,1184,1186,1189,1191,1193,1195,1197,1199,1201,1203,1205,1207],{"class":394,"line":431},[392,1182,1183],{"class":398},"    $",[392,1185,851],{"class":593},[392,1187,1188],{"class":707},"->",[392,1190,1028],{"class":711},[392,1192,1155],{"class":398},[392,1194,889],{"class":461},[392,1196,540],{"class":465},[392,1198,889],{"class":461},[392,1200,919],{"class":398},[392,1202,688],{"class":461},[392,1204,1086],{"class":465},[392,1206,889],{"class":461},[392,1208,1209],{"class":398},");\n",[392,1211,1212,1214,1216,1218,1221],{"class":394,"line":442},[392,1213,1183],{"class":398},[392,1215,851],{"class":593},[392,1217,1188],{"class":707},[392,1219,1220],{"class":711},"flush",[392,1222,1223],{"class":398},"();\n",[392,1225,1226],{"class":394,"line":451},[392,1227,984],{"class":398},[351,1229,1230,1231,1234],{},"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 ",[1232,1233,125],"a",{"href":126}," for the full scaffold API.",[370,1236,1238],{"id":1237},"next-create-a-page-template","Next: Create a Page Template",[351,1240,1241,1242,1245],{},"With a layout in place, ",[1232,1243,1244],{"href":25},"create a page template"," to define the content regions for individual pages.",[1247,1248,1249],"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 .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 .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 pre.shiki code .sKpYG, html code.shiki .sKpYG{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#82AAFF}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":388,"searchDepth":409,"depth":409,"links":1251},[1252,1255,1256,1260],{"id":372,"depth":409,"text":373,"children":1253},[1254],{"id":727,"depth":420,"text":728},{"id":832,"depth":409,"text":833},{"id":1056,"depth":409,"text":1057,"children":1257},[1258,1259],{"id":1097,"depth":420,"text":1098},{"id":1122,"depth":420,"text":1123},{"id":1237,"depth":409,"text":1238},"Create a layout component that wraps every page with your site header, footer, and navigation.","md",null,{},{"title":20,"description":1261},"OcMZdLk-iKXtW_aMrQ4gn9n_olnn__pnop5jmJnwtNY",[1268,1270],{"title":11,"path":12,"stem":13,"description":1269,"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":1271,"children":-1},"Create a page template that defines the content regions within a layout using CwaComponentGroup.",1782241278654]