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