[{"data":1,"prerenderedAt":1538},["ShallowReactive",2],{"navigation":3,"\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-layouts":342,"\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-layouts-surround":1533},[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":168,"badge":344,"body":347,"description":1527,"extension":1528,"links":1529,"meta":1530,"navigation":511,"path":169,"seo":1531,"stem":170,"__hash__":1532},"docs\u002F5.nuxt-module\u002F3.building-your-ui\u002F1.creating-layouts.md",{"label":345,"color":346},"Draft","amber",{"type":348,"value":349,"toc":1517},"minimark",[350,363,368,378,388,392,758,764,768,775,895,904,940,944,951,1113,1121,1125,1132,1193,1197,1203,1383,1389,1393,1396,1402,1408,1412,1415,1513],[351,352,353,354,358,359,362],"p",{},"A CWA layout is the outer shell of your site — the header, footer, navigation, and any component groups that persist across pages. The PHP API has a ",[355,356,357],"code",{},"Layout"," entity whose ",[355,360,361],{},"uiComponent"," value maps to your Vue file.",[364,365,367],"h2",{"id":366},"file-convention","File Convention",[369,370,375],"pre",{"className":371,"code":373,"language":374},[372],"language-text","app\u002Fcwa\u002Flayouts\u002FPrimary.vue  →  registered as CwaLayoutPrimary\n","text",[355,376,373],{"__ignoreMap":377},"",[351,379,380,381,384,385,387],{},"The file name (without ",[355,382,383],{},".vue",") must match the ",[355,386,361],{}," value stored in the Layout API entity. Capitalisation matters.",[364,389,391],{"id":390},"minimal-layout","Minimal Layout",[369,393,397],{"className":394,"code":395,"language":396,"meta":377,"style":377},"language-vue shiki shiki-themes github-light github-dark material-theme-palenight","\u003C!-- app\u002Fcwa\u002Flayouts\u002FPrimary.vue -->\n\u003Ctemplate>\n    \u003Cdiv :class=\"uiClassNames\">\n        \u003Cheader>\n            \u003CNuxtLink to=\"\u002F\">Home\u003C\u002FNuxtLink>\n        \u003C\u002Fheader>\n\n        \u003Cmain>\n            \u003Cslot \u002F>\n        \u003C\u002Fmain>\n\n        \u003Cfooter>\n            \u003Cp>© 2024 My Site\u003C\u002Fp>\n        \u003C\u002Ffooter>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst cwa = useCwa()\n\nconst layout = computed(() => cwa.resources.layout.value)\nconst uiClassNames = computed(() => layout.value?.data?.uiClassNames ?? '')\n\u003C\u002Fscript>\n","vue",[355,398,399,408,422,450,461,496,506,513,523,537,546,551,561,579,588,598,607,612,637,659,664,704,749],{"__ignoreMap":377},[400,401,404],"span",{"class":402,"line":403},"line",1,[400,405,407],{"class":406},"sTBSN","\u003C!-- app\u002Fcwa\u002Flayouts\u002FPrimary.vue -->\n",[400,409,411,415,419],{"class":402,"line":410},2,[400,412,414],{"class":413},"sOvfz","\u003C",[400,416,418],{"class":417},"s-h7I","template",[400,420,421],{"class":413},">\n",[400,423,425,428,431,435,438,442,446,448],{"class":402,"line":424},3,[400,426,427],{"class":413},"    \u003C",[400,429,430],{"class":417},"div",[400,432,434],{"class":433},"sGtlX"," :class",[400,436,437],{"class":413},"=",[400,439,441],{"class":440},"seSrl","\"",[400,443,445],{"class":444},"sLL54","uiClassNames",[400,447,441],{"class":440},[400,449,421],{"class":413},[400,451,453,456,459],{"class":402,"line":452},4,[400,454,455],{"class":413},"        \u003C",[400,457,458],{"class":417},"header",[400,460,421],{"class":413},[400,462,464,467,470,473,475,477,480,482,485,489,492,494],{"class":402,"line":463},5,[400,465,466],{"class":413},"            \u003C",[400,468,469],{"class":417},"NuxtLink",[400,471,472],{"class":433}," to",[400,474,437],{"class":413},[400,476,441],{"class":440},[400,478,479],{"class":444},"\u002F",[400,481,441],{"class":440},[400,483,484],{"class":413},">",[400,486,488],{"class":487},"sPB8G","Home",[400,490,491],{"class":413},"\u003C\u002F",[400,493,469],{"class":417},[400,495,421],{"class":413},[400,497,499,502,504],{"class":402,"line":498},6,[400,500,501],{"class":413},"        \u003C\u002F",[400,503,458],{"class":417},[400,505,421],{"class":413},[400,507,509],{"class":402,"line":508},7,[400,510,512],{"emptyLinePlaceholder":511},true,"\n",[400,514,516,518,521],{"class":402,"line":515},8,[400,517,455],{"class":413},[400,519,520],{"class":417},"main",[400,522,421],{"class":413},[400,524,526,528,531,535],{"class":402,"line":525},9,[400,527,466],{"class":413},[400,529,530],{"class":417},"slot",[400,532,534],{"class":533},"s01iV"," \u002F",[400,536,421],{"class":413},[400,538,540,542,544],{"class":402,"line":539},10,[400,541,501],{"class":413},[400,543,520],{"class":417},[400,545,421],{"class":413},[400,547,549],{"class":402,"line":548},11,[400,550,512],{"emptyLinePlaceholder":511},[400,552,554,556,559],{"class":402,"line":553},12,[400,555,455],{"class":413},[400,557,558],{"class":417},"footer",[400,560,421],{"class":413},[400,562,564,566,568,570,573,575,577],{"class":402,"line":563},13,[400,565,466],{"class":413},[400,567,351],{"class":417},[400,569,484],{"class":413},[400,571,572],{"class":487},"© 2024 My Site",[400,574,491],{"class":413},[400,576,351],{"class":417},[400,578,421],{"class":413},[400,580,582,584,586],{"class":402,"line":581},14,[400,583,501],{"class":413},[400,585,558],{"class":417},[400,587,421],{"class":413},[400,589,591,594,596],{"class":402,"line":590},15,[400,592,593],{"class":413},"    \u003C\u002F",[400,595,430],{"class":417},[400,597,421],{"class":413},[400,599,601,603,605],{"class":402,"line":600},16,[400,602,491],{"class":413},[400,604,418],{"class":417},[400,606,421],{"class":413},[400,608,610],{"class":402,"line":609},17,[400,611,512],{"emptyLinePlaceholder":511},[400,613,615,617,620,623,626,628,630,633,635],{"class":402,"line":614},18,[400,616,414],{"class":413},[400,618,619],{"class":417},"script",[400,621,622],{"class":433}," setup",[400,624,625],{"class":433}," lang",[400,627,437],{"class":413},[400,629,441],{"class":440},[400,631,632],{"class":444},"ts",[400,634,441],{"class":440},[400,636,421],{"class":413},[400,638,640,644,648,652,656],{"class":402,"line":639},19,[400,641,643],{"class":642},"swB56","const",[400,645,647],{"class":646},"sc2zw"," cwa",[400,649,651],{"class":650},"sVlFx"," =",[400,653,655],{"class":654},"sKpYG"," useCwa",[400,657,658],{"class":487},"()\n",[400,660,662],{"class":402,"line":661},20,[400,663,512],{"emptyLinePlaceholder":511},[400,665,667,669,672,674,677,680,683,686,688,691,694,696,699,701],{"class":402,"line":666},21,[400,668,643],{"class":642},[400,670,671],{"class":646}," layout",[400,673,651],{"class":650},[400,675,676],{"class":654}," computed",[400,678,679],{"class":487},"(",[400,681,682],{"class":413},"()",[400,684,685],{"class":642}," =>",[400,687,647],{"class":487},[400,689,690],{"class":413},".",[400,692,693],{"class":487},"resources",[400,695,690],{"class":413},[400,697,698],{"class":487},"layout",[400,700,690],{"class":413},[400,702,703],{"class":487},"value)\n",[400,705,707,709,712,714,716,718,720,722,724,726,729,732,735,737,740,743,746],{"class":402,"line":706},22,[400,708,643],{"class":642},[400,710,711],{"class":646}," uiClassNames",[400,713,651],{"class":650},[400,715,676],{"class":654},[400,717,679],{"class":487},[400,719,682],{"class":413},[400,721,685],{"class":642},[400,723,671],{"class":487},[400,725,690],{"class":413},[400,727,728],{"class":487},"value",[400,730,731],{"class":413},"?.",[400,733,734],{"class":487},"data",[400,736,731],{"class":413},[400,738,739],{"class":487},"uiClassNames ",[400,741,742],{"class":650},"??",[400,744,745],{"class":440}," ''",[400,747,748],{"class":487},")\n",[400,750,752,754,756],{"class":402,"line":751},23,[400,753,491],{"class":413},[400,755,619],{"class":417},[400,757,421],{"class":413},[351,759,760,761,690],{},"No special props needed — the page content renders into the default ",[355,762,763],{},"\u003Cslot \u002F>",[364,765,767],{"id":766},"accessing-layout-data","Accessing Layout Data",[351,769,770,771,774],{},"The layout resource is available through ",[355,772,773],{},"cwa.resources.layout",":",[369,776,779],{"className":777,"code":778,"language":632,"meta":377,"style":377},"language-ts shiki shiki-themes github-light github-dark material-theme-palenight","const cwa = useCwa()\n\nconst layout = computed(() => cwa.resources.layout.value)\nconst uiClassNames = computed(() => layout.value?.data?.uiClassNames ?? '')\nconst isLoading = computed(() => cwa.resources.isLoading.value)\n",[355,780,781,793,797,827,863],{"__ignoreMap":377},[400,782,783,785,787,789,791],{"class":402,"line":403},[400,784,643],{"class":642},[400,786,647],{"class":646},[400,788,651],{"class":650},[400,790,655],{"class":654},[400,792,658],{"class":487},[400,794,795],{"class":402,"line":410},[400,796,512],{"emptyLinePlaceholder":511},[400,798,799,801,803,805,807,809,811,813,815,817,819,821,823,825],{"class":402,"line":424},[400,800,643],{"class":642},[400,802,671],{"class":646},[400,804,651],{"class":650},[400,806,676],{"class":654},[400,808,679],{"class":487},[400,810,682],{"class":413},[400,812,685],{"class":642},[400,814,647],{"class":487},[400,816,690],{"class":413},[400,818,693],{"class":487},[400,820,690],{"class":413},[400,822,698],{"class":487},[400,824,690],{"class":413},[400,826,703],{"class":487},[400,828,829,831,833,835,837,839,841,843,845,847,849,851,853,855,857,859,861],{"class":402,"line":452},[400,830,643],{"class":642},[400,832,711],{"class":646},[400,834,651],{"class":650},[400,836,676],{"class":654},[400,838,679],{"class":487},[400,840,682],{"class":413},[400,842,685],{"class":642},[400,844,671],{"class":487},[400,846,690],{"class":413},[400,848,728],{"class":487},[400,850,731],{"class":413},[400,852,734],{"class":487},[400,854,731],{"class":413},[400,856,739],{"class":487},[400,858,742],{"class":650},[400,860,745],{"class":440},[400,862,748],{"class":487},[400,864,865,867,870,872,874,876,878,880,882,884,886,888,891,893],{"class":402,"line":463},[400,866,643],{"class":642},[400,868,869],{"class":646}," isLoading",[400,871,651],{"class":650},[400,873,676],{"class":654},[400,875,679],{"class":487},[400,877,682],{"class":413},[400,879,685],{"class":642},[400,881,647],{"class":487},[400,883,690],{"class":413},[400,885,693],{"class":487},[400,887,690],{"class":413},[400,889,890],{"class":487},"isLoading",[400,892,690],{"class":413},[400,894,703],{"class":487},[351,896,897,899,900,903],{},[355,898,445],{}," contains the CSS class name(s) the admin selected from the options you register in ",[355,901,902],{},"nuxt.config",". Apply them to the layout's root element:",[369,905,907],{"className":394,"code":906,"language":396,"meta":377,"style":377},"\u003Cdiv :class=\"uiClassNames\">...\u003C\u002Fdiv>\n",[355,908,909],{"__ignoreMap":377},[400,910,911,913,915,918,921,923,925,927,929,931,934,936,938],{"class":402,"line":403},[400,912,414],{"class":413},[400,914,430],{"class":417},[400,916,917],{"class":413}," :",[400,919,920],{"class":433},"class",[400,922,437],{"class":413},[400,924,441],{"class":440},[400,926,445],{"class":487},[400,928,441],{"class":440},[400,930,484],{"class":413},[400,932,933],{"class":487},"...",[400,935,491],{"class":413},[400,937,430],{"class":417},[400,939,421],{"class":413},[364,941,943],{"id":942},"component-groups","Component Groups",[351,945,946,947,950],{},"Add named content regions that admins can populate with components. The ",[355,948,949],{},"reference"," is a stable name unique within this layout's IRI:",[369,952,954],{"className":394,"code":953,"language":396,"meta":377,"style":377},"\u003Ctemplate>\n    \u003Cdiv>\n        \u003Cheader>\n            \u003CCwaComponentGroup\n                reference=\"navigation\"\n                :location=\"cwa.resources.layoutIri.value\"\n            \u002F>\n        \u003C\u002Fheader>\n\n        \u003Cslot \u002F>\n\n        \u003Cfooter>\n            \u003CCwaComponentGroup\n                reference=\"footer\"\n                :location=\"cwa.resources.layoutIri.value\"\n            \u002F>\n        \u003C\u002Ffooter>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[355,955,956,964,972,980,987,1002,1016,1021,1029,1033,1043,1047,1055,1061,1073,1085,1089,1097,1105],{"__ignoreMap":377},[400,957,958,960,962],{"class":402,"line":403},[400,959,414],{"class":413},[400,961,418],{"class":417},[400,963,421],{"class":413},[400,965,966,968,970],{"class":402,"line":410},[400,967,427],{"class":413},[400,969,430],{"class":417},[400,971,421],{"class":413},[400,973,974,976,978],{"class":402,"line":424},[400,975,455],{"class":413},[400,977,458],{"class":417},[400,979,421],{"class":413},[400,981,982,984],{"class":402,"line":452},[400,983,466],{"class":413},[400,985,986],{"class":417},"CwaComponentGroup\n",[400,988,989,992,994,996,999],{"class":402,"line":463},[400,990,991],{"class":433},"                reference",[400,993,437],{"class":413},[400,995,441],{"class":440},[400,997,998],{"class":444},"navigation",[400,1000,1001],{"class":440},"\"\n",[400,1003,1004,1007,1009,1011,1014],{"class":402,"line":498},[400,1005,1006],{"class":433},"                :location",[400,1008,437],{"class":413},[400,1010,441],{"class":440},[400,1012,1013],{"class":444},"cwa.resources.layoutIri.value",[400,1015,1001],{"class":440},[400,1017,1018],{"class":402,"line":508},[400,1019,1020],{"class":413},"            \u002F>\n",[400,1022,1023,1025,1027],{"class":402,"line":515},[400,1024,501],{"class":413},[400,1026,458],{"class":417},[400,1028,421],{"class":413},[400,1030,1031],{"class":402,"line":525},[400,1032,512],{"emptyLinePlaceholder":511},[400,1034,1035,1037,1039,1041],{"class":402,"line":539},[400,1036,455],{"class":413},[400,1038,530],{"class":417},[400,1040,534],{"class":533},[400,1042,421],{"class":413},[400,1044,1045],{"class":402,"line":548},[400,1046,512],{"emptyLinePlaceholder":511},[400,1048,1049,1051,1053],{"class":402,"line":553},[400,1050,455],{"class":413},[400,1052,558],{"class":417},[400,1054,421],{"class":413},[400,1056,1057,1059],{"class":402,"line":563},[400,1058,466],{"class":413},[400,1060,986],{"class":417},[400,1062,1063,1065,1067,1069,1071],{"class":402,"line":581},[400,1064,991],{"class":433},[400,1066,437],{"class":413},[400,1068,441],{"class":440},[400,1070,558],{"class":444},[400,1072,1001],{"class":440},[400,1074,1075,1077,1079,1081,1083],{"class":402,"line":590},[400,1076,1006],{"class":433},[400,1078,437],{"class":413},[400,1080,441],{"class":440},[400,1082,1013],{"class":444},[400,1084,1001],{"class":440},[400,1086,1087],{"class":402,"line":600},[400,1088,1020],{"class":413},[400,1090,1091,1093,1095],{"class":402,"line":609},[400,1092,501],{"class":413},[400,1094,558],{"class":417},[400,1096,421],{"class":413},[400,1098,1099,1101,1103],{"class":402,"line":614},[400,1100,593],{"class":413},[400,1102,430],{"class":417},[400,1104,421],{"class":413},[400,1106,1107,1109,1111],{"class":402,"line":639},[400,1108,491],{"class":413},[400,1110,418],{"class":417},[400,1112,421],{"class":413},[351,1114,1115,1118,1119,690],{},[355,1116,1117],{},"location"," must be the IRI of the owning entity — for layout groups, that's ",[355,1120,1013],{},[364,1122,1124],{"id":1123},"auth-conditional-ui","Auth-Conditional UI",[351,1126,1127,1128,1131],{},"Auth state is only available after client hydration. Always wrap auth-dependent UI in ",[355,1129,1130],{},"\u003CClientOnly>"," to avoid SSR hydration mismatches:",[369,1133,1135],{"className":394,"code":1134,"language":396,"meta":377,"style":377},"\u003CClientOnly>\n    \u003Ctemplate #default>\n        \u003CUserMenu v-if=\"$cwa.auth.signedIn.value\" \u002F>\n        \u003CNuxtLink v-else to=\"\u002Flogin\">Sign in\u003C\u002FNuxtLink>\n    \u003C\u002Ftemplate>\n    \u003Ctemplate #fallback>\n        \u003C!-- server-side: render nothing or a skeleton -->\n        \u003Cdiv class=\"w-20 h-8 bg-gray-200 rounded animate-pulse\" \u002F>\n    \u003C\u002Ftemplate>\n\u003C\u002FClientOnly>\n",[355,1136,1137,1146,1151,1156,1161,1166,1171,1176,1181,1185],{"__ignoreMap":377},[400,1138,1139,1141,1144],{"class":402,"line":403},[400,1140,414],{"class":413},[400,1142,1143],{"class":417},"ClientOnly",[400,1145,421],{"class":413},[400,1147,1148],{"class":402,"line":410},[400,1149,1150],{"class":487},"    \u003Ctemplate #default>\n",[400,1152,1153],{"class":402,"line":424},[400,1154,1155],{"class":487},"        \u003CUserMenu v-if=\"$cwa.auth.signedIn.value\" \u002F>\n",[400,1157,1158],{"class":402,"line":452},[400,1159,1160],{"class":487},"        \u003CNuxtLink v-else to=\"\u002Flogin\">Sign in\u003C\u002FNuxtLink>\n",[400,1162,1163],{"class":402,"line":463},[400,1164,1165],{"class":487},"    \u003C\u002Ftemplate>\n",[400,1167,1168],{"class":402,"line":498},[400,1169,1170],{"class":487},"    \u003Ctemplate #fallback>\n",[400,1172,1173],{"class":402,"line":508},[400,1174,1175],{"class":487},"        \u003C!-- server-side: render nothing or a skeleton -->\n",[400,1177,1178],{"class":402,"line":515},[400,1179,1180],{"class":487},"        \u003Cdiv class=\"w-20 h-8 bg-gray-200 rounded animate-pulse\" \u002F>\n",[400,1182,1183],{"class":402,"line":525},[400,1184,1165],{"class":487},[400,1186,1187,1189,1191],{"class":402,"line":539},[400,1188,491],{"class":413},[400,1190,1143],{"class":417},[400,1192,421],{"class":413},[364,1194,1196],{"id":1195},"registering-layout-options","Registering Layout Options",[351,1198,1199,1200,1202],{},"Register your layout in ",[355,1201,902],{}," to expose it in the admin panel and define which CSS classes an admin can apply:",[369,1204,1206],{"className":777,"code":1205,"language":632,"meta":377,"style":377},"\u002F\u002F nuxt.config.ts\ncwa: {\n    layouts: {\n        Primary: {\n            name: 'Primary Layout',\n            classes: [\n                { value: '', label: 'Default' },\n                { value: 'theme-light', label: 'Light' },\n                { value: 'theme-dark', label: 'Dark' }\n            ]\n        }\n    }\n}\n",[355,1207,1208,1213,1224,1233,1242,1261,1272,1302,1332,1363,1368,1373,1378],{"__ignoreMap":377},[400,1209,1210],{"class":402,"line":403},[400,1211,1212],{"class":406},"\u002F\u002F nuxt.config.ts\n",[400,1214,1215,1219,1221],{"class":402,"line":410},[400,1216,1218],{"class":1217},"sRCss","cwa",[400,1220,774],{"class":413},[400,1222,1223],{"class":413}," {\n",[400,1225,1226,1229,1231],{"class":402,"line":424},[400,1227,1228],{"class":1217},"    layouts",[400,1230,774],{"class":413},[400,1232,1223],{"class":413},[400,1234,1235,1238,1240],{"class":402,"line":452},[400,1236,1237],{"class":1217},"        Primary",[400,1239,774],{"class":413},[400,1241,1223],{"class":413},[400,1243,1244,1247,1249,1252,1255,1258],{"class":402,"line":463},[400,1245,1246],{"class":1217},"            name",[400,1248,774],{"class":413},[400,1250,1251],{"class":440}," '",[400,1253,1254],{"class":444},"Primary Layout",[400,1256,1257],{"class":440},"'",[400,1259,1260],{"class":413},",\n",[400,1262,1263,1266,1268],{"class":402,"line":498},[400,1264,1265],{"class":1217},"            classes",[400,1267,774],{"class":413},[400,1269,1271],{"class":1270},"sDHlG"," [\n",[400,1273,1274,1277,1280,1282,1284,1287,1290,1292,1294,1297,1299],{"class":402,"line":508},[400,1275,1276],{"class":413},"                {",[400,1278,1279],{"class":1270}," value",[400,1281,774],{"class":413},[400,1283,745],{"class":440},[400,1285,1286],{"class":413},",",[400,1288,1289],{"class":1270}," label",[400,1291,774],{"class":413},[400,1293,1251],{"class":440},[400,1295,1296],{"class":444},"Default",[400,1298,1257],{"class":440},[400,1300,1301],{"class":413}," },\n",[400,1303,1304,1306,1308,1310,1312,1315,1317,1319,1321,1323,1325,1328,1330],{"class":402,"line":515},[400,1305,1276],{"class":413},[400,1307,1279],{"class":1270},[400,1309,774],{"class":413},[400,1311,1251],{"class":440},[400,1313,1314],{"class":444},"theme-light",[400,1316,1257],{"class":440},[400,1318,1286],{"class":413},[400,1320,1289],{"class":1270},[400,1322,774],{"class":413},[400,1324,1251],{"class":440},[400,1326,1327],{"class":444},"Light",[400,1329,1257],{"class":440},[400,1331,1301],{"class":413},[400,1333,1334,1336,1338,1340,1342,1345,1347,1349,1351,1353,1355,1358,1360],{"class":402,"line":525},[400,1335,1276],{"class":413},[400,1337,1279],{"class":1270},[400,1339,774],{"class":413},[400,1341,1251],{"class":440},[400,1343,1344],{"class":444},"theme-dark",[400,1346,1257],{"class":440},[400,1348,1286],{"class":413},[400,1350,1289],{"class":1270},[400,1352,774],{"class":413},[400,1354,1251],{"class":440},[400,1356,1357],{"class":444},"Dark",[400,1359,1257],{"class":440},[400,1361,1362],{"class":413}," }\n",[400,1364,1365],{"class":402,"line":539},[400,1366,1367],{"class":1270},"            ]\n",[400,1369,1370],{"class":402,"line":548},[400,1371,1372],{"class":413},"        }\n",[400,1374,1375],{"class":402,"line":553},[400,1376,1377],{"class":413},"    }\n",[400,1379,1380],{"class":402,"line":563},[400,1381,1382],{"class":413},"}\n",[351,1384,1385,1386,1388],{},"A layout that isn't registered in ",[355,1387,902],{}," still renders correctly — it just has no name in the admin and no class options.",[364,1390,1392],{"id":1391},"multiple-layouts","Multiple Layouts",[351,1394,1395],{},"Create one file per layout variant. A common setup:",[369,1397,1400],{"className":1398,"code":1399,"language":374},[372],"app\u002Fcwa\u002Flayouts\u002F\n    Primary.vue     # full layout with header + footer\n    Minimal.vue     # just a centered container (login pages, errors)\n    Landing.vue     # marketing layout with large hero\n",[355,1401,1399],{"__ignoreMap":377},[351,1403,1404,1405,690],{},"Each is independently configurable in ",[355,1406,1407],{},"nuxt.config.layouts",[364,1409,1411],{"id":1410},"loading-state","Loading State",[351,1413,1414],{},"Show a skeleton while the layout resource is loading. The layout loads first in the CWA fetch sequence, so this is typically only visible on the initial server-side render:",[369,1416,1418],{"className":394,"code":1417,"language":396,"meta":377,"style":377},"\u003Cdiv v-if=\"cwa.resources.isLoading.value\" class=\"animate-pulse ...\">\n    \u003C!-- skeleton -->\n\u003C\u002Fdiv>\n\u003Cdiv v-else :class=\"uiClassNames\">\n    \u003C!-- real content -->\n\u003C\u002Fdiv>\n",[355,1419,1420,1464,1469,1477,1500,1505],{"__ignoreMap":377},[400,1421,1422,1424,1426,1430,1432,1434,1436,1438,1440,1442,1444,1446,1448,1450,1453,1455,1457,1460,1462],{"class":402,"line":403},[400,1423,414],{"class":413},[400,1425,430],{"class":417},[400,1427,1429],{"class":1428},"sm4w6"," v-if",[400,1431,437],{"class":413},[400,1433,441],{"class":440},[400,1435,1218],{"class":487},[400,1437,690],{"class":413},[400,1439,693],{"class":487},[400,1441,690],{"class":413},[400,1443,890],{"class":487},[400,1445,690],{"class":413},[400,1447,728],{"class":487},[400,1449,441],{"class":440},[400,1451,1452],{"class":433}," class",[400,1454,437],{"class":413},[400,1456,441],{"class":440},[400,1458,1459],{"class":444},"animate-pulse ...",[400,1461,441],{"class":440},[400,1463,421],{"class":413},[400,1465,1466],{"class":402,"line":410},[400,1467,1468],{"class":487},"    \u003C!-- skeleton -->\n",[400,1470,1471,1473,1475],{"class":402,"line":424},[400,1472,491],{"class":413},[400,1474,430],{"class":417},[400,1476,421],{"class":413},[400,1478,1479,1481,1483,1486,1488,1490,1492,1494,1496,1498],{"class":402,"line":452},[400,1480,414],{"class":413},[400,1482,430],{"class":417},[400,1484,1485],{"class":1428}," v-else",[400,1487,917],{"class":413},[400,1489,920],{"class":433},[400,1491,437],{"class":413},[400,1493,441],{"class":440},[400,1495,445],{"class":487},[400,1497,441],{"class":440},[400,1499,421],{"class":413},[400,1501,1502],{"class":402,"line":463},[400,1503,1504],{"class":487},"    \u003C!-- real content -->\n",[400,1506,1507,1509,1511],{"class":402,"line":498},[400,1508,491],{"class":413},[400,1510,430],{"class":417},[400,1512,421],{"class":413},[1514,1515,1516],"style",{},"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 .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 .sPB8G, html code.shiki .sPB8G{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#BABED8}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 .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 .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 .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 .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}",{"title":377,"searchDepth":410,"depth":410,"links":1518},[1519,1520,1521,1522,1523,1524,1525,1526],{"id":366,"depth":410,"text":367},{"id":390,"depth":410,"text":391},{"id":766,"depth":410,"text":767},{"id":942,"depth":410,"text":943},{"id":1123,"depth":410,"text":1124},{"id":1195,"depth":410,"text":1196},{"id":1391,"depth":410,"text":1392},{"id":1410,"depth":410,"text":1411},"How to create CWA layout components that form the outer shell of your site — header, footer, navigation, and component group regions.","md",null,{},{"title":168,"description":1527},"xeBye8cUqEGFzkwPyE84e8EE1ewZJOA-6hRFb1RUhO0",[1534,1536],{"title":159,"path":160,"stem":161,"description":1535,"children":-1},"Admin settings panel, siteConfig API, per-page SEO from page data, sitemap, maintenance mode, and robots configuration.",{"title":172,"path":173,"stem":174,"description":1537,"children":-1},"How to create CWA page template components that define the content regions of a page using CwaComponentGroup and CwaPage.",1782241286099]