[{"data":1,"prerenderedAt":1314},["ShallowReactive",2],{"navigation":3,"\u002Fcore-concepts\u002Fcomponents":342,"\u002Fcore-concepts\u002Fcomponents-surround":1309},[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":58,"badge":344,"body":347,"description":1303,"extension":1304,"links":1305,"meta":1306,"navigation":512,"path":59,"seo":1307,"stem":60,"__hash__":1308},"docs\u002F3.core-concepts\u002F5.components.md",{"label":345,"color":346},"Draft","amber",{"type":348,"value":349,"toc":1292},"minimark",[350,355,364,367,389,393,398,573,583,587,847,858,862,865,1083,1090,1094,1097,1205,1212,1215,1221,1224,1246,1252,1256,1263,1281,1288],[351,352,354],"h2",{"id":353},"what-is-a-component","What Is a Component?",[356,357,358,359,363],"p",{},"A component is the ",[360,361,362],"strong",{},"smallest unit of managed content"," on a page. Every piece of visible content — a heading, a block of rich text, an image, a call-to-action button, a conference card — is a component.",[356,365,366],{},"Components are:",[368,369,370,377,383],"ul",{},[371,372,373,376],"li",{},[360,374,375],{},"Stored in the API"," as entities in your database (each type is a PHP class)",[371,378,379,382],{},[360,380,381],{},"Rendered by the Nuxt module"," using matching Vue files",[371,384,385,388],{},[360,386,387],{},"Edited inline"," in the browser by admins without leaving the page",[351,390,392],{"id":391},"a-component-has-two-sides","A Component Has Two Sides",[394,395,397],"h3",{"id":396},"_1-the-php-entity-the-data","1. The PHP entity (the data)",[399,400,405],"pre",{"className":401,"code":402,"language":403,"meta":404,"style":404},"language-php shiki shiki-themes github-light github-dark material-theme-palenight","#[Silverback\\Publishable]\n#[ApiResource(mercure: true)]\n#[ORM\\Entity]\nclass Title extends AbstractComponent\n{\n    use PublishableTrait;\n\n    #[ORM\\Column(nullable: true)]\n    public ?string $title = null;\n}\n","php","",[406,407,408,430,457,472,488,494,507,514,540,567],"code",{"__ignoreMap":404},[409,410,413,417,421,425,427],"span",{"class":411,"line":412},"line",1,[409,414,416],{"class":415},"sPB8G","#[",[409,418,420],{"class":419},"sc2zw","Silverback",[409,422,424],{"class":423},"sBtbT","\\",[409,426,92],{"class":419},[409,428,429],{"class":415},"]\n",[409,431,433,435,438,442,446,449,452,455],{"class":411,"line":432},2,[409,434,416],{"class":415},[409,436,437],{"class":419},"ApiResource",[409,439,441],{"class":440},"sOvfz","(",[409,443,445],{"class":444},"sRCss","mercure",[409,447,448],{"class":440},":",[409,450,451],{"class":423}," true",[409,453,454],{"class":440},")",[409,456,429],{"class":415},[409,458,460,462,465,467,470],{"class":411,"line":459},3,[409,461,416],{"class":415},[409,463,464],{"class":419},"ORM",[409,466,424],{"class":423},[409,468,469],{"class":419},"Entity",[409,471,429],{"class":415},[409,473,475,479,482,485],{"class":411,"line":474},4,[409,476,478],{"class":477},"swB56","class",[409,480,481],{"class":444}," Title",[409,483,484],{"class":477}," extends",[409,486,487],{"class":444}," AbstractComponent\n",[409,489,491],{"class":411,"line":490},5,[409,492,493],{"class":440},"{\n",[409,495,497,501,504],{"class":411,"line":496},6,[409,498,500],{"class":499},"stmX-","    use",[409,502,503],{"class":419}," PublishableTrait",[409,505,506],{"class":440},";\n",[409,508,510],{"class":411,"line":509},7,[409,511,513],{"emptyLinePlaceholder":512},true,"\n",[409,515,517,520,522,524,527,529,532,534,536,538],{"class":411,"line":516},8,[409,518,519],{"class":415},"    #[",[409,521,464],{"class":419},[409,523,424],{"class":423},[409,525,526],{"class":419},"Column",[409,528,441],{"class":440},[409,530,531],{"class":444},"nullable",[409,533,448],{"class":440},[409,535,451],{"class":423},[409,537,454],{"class":440},[409,539,429],{"class":415},[409,541,543,546,550,553,556,559,562,565],{"class":411,"line":542},9,[409,544,545],{"class":477},"    public",[409,547,549],{"class":548},"sVlFx"," ?",[409,551,552],{"class":499},"string",[409,554,555],{"class":440}," $",[409,557,558],{"class":415},"title ",[409,560,561],{"class":548},"=",[409,563,564],{"class":423}," null",[409,566,506],{"class":440},[409,568,570],{"class":411,"line":569},10,[409,571,572],{"class":440},"}\n",[356,574,575,578,579,582],{},[406,576,577],{},"AbstractComponent"," gives it identity (IRI, UUID) and the ",[406,580,581],{},"uiComponent"," field. You add your own data fields.",[394,584,586],{"id":585},"_2-the-vue-component-the-display","2. The Vue component (the display)",[399,588,592],{"className":589,"code":590,"language":591,"meta":404,"style":404},"language-vue shiki shiki-themes github-light github-dark material-theme-palenight","\u003C!-- app\u002Fcwa\u002Fcomponents\u002FTitle\u002FTitle.vue -->\n\u003Ctemplate>\n  \u003Ch1>{{ resource?.data?.title || 'No Title' }}\u003C\u002Fh1>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { toRef } from 'vue'\nimport type { IriProp } from '#cwa\u002Fcomposables\u002Fcwa-resource'\nimport { useCwaResource } from '#imports'\n\nconst props = defineProps\u003CIriProp>()\nconst { getResource, exposeMeta } = useCwaResource(toRef(props, 'iri'))\nconst resource = getResource()\ndefineExpose(exposeMeta)\n\u003C\u002Fscript>\n","vue",[406,593,594,600,612,633,641,645,673,699,722,742,746,772,815,829,838],{"__ignoreMap":404},[409,595,596],{"class":411,"line":412},[409,597,599],{"class":598},"sTBSN","\u003C!-- app\u002Fcwa\u002Fcomponents\u002FTitle\u002FTitle.vue -->\n",[409,601,602,605,609],{"class":411,"line":432},[409,603,604],{"class":440},"\u003C",[409,606,608],{"class":607},"s-h7I","template",[409,610,611],{"class":440},">\n",[409,613,614,617,620,623,626,629,631],{"class":411,"line":459},[409,615,616],{"class":440},"  \u003C",[409,618,619],{"class":607},"h1",[409,621,622],{"class":440},">",[409,624,625],{"class":415},"{{ resource?.data?.title || 'No Title' }}",[409,627,628],{"class":440},"\u003C\u002F",[409,630,619],{"class":607},[409,632,611],{"class":440},[409,634,635,637,639],{"class":411,"line":474},[409,636,628],{"class":440},[409,638,608],{"class":607},[409,640,611],{"class":440},[409,642,643],{"class":411,"line":490},[409,644,513],{"emptyLinePlaceholder":512},[409,646,647,649,652,656,659,661,665,669,671],{"class":411,"line":496},[409,648,604],{"class":440},[409,650,651],{"class":607},"script",[409,653,655],{"class":654},"sGtlX"," setup",[409,657,658],{"class":654}," lang",[409,660,561],{"class":440},[409,662,664],{"class":663},"seSrl","\"",[409,666,668],{"class":667},"sLL54","ts",[409,670,664],{"class":663},[409,672,611],{"class":440},[409,674,675,679,682,685,688,691,694,696],{"class":411,"line":509},[409,676,678],{"class":677},"sm4w6","import",[409,680,681],{"class":440}," {",[409,683,684],{"class":415}," toRef",[409,686,687],{"class":440}," }",[409,689,690],{"class":677}," from",[409,692,693],{"class":663}," '",[409,695,591],{"class":667},[409,697,698],{"class":663},"'\n",[409,700,701,703,706,708,711,713,715,717,720],{"class":411,"line":516},[409,702,678],{"class":677},[409,704,705],{"class":677}," type",[409,707,681],{"class":440},[409,709,710],{"class":415}," IriProp",[409,712,687],{"class":440},[409,714,690],{"class":677},[409,716,693],{"class":663},[409,718,719],{"class":667},"#cwa\u002Fcomposables\u002Fcwa-resource",[409,721,698],{"class":663},[409,723,724,726,728,731,733,735,737,740],{"class":411,"line":542},[409,725,678],{"class":677},[409,727,681],{"class":440},[409,729,730],{"class":415}," useCwaResource",[409,732,687],{"class":440},[409,734,690],{"class":677},[409,736,693],{"class":663},[409,738,739],{"class":667},"#imports",[409,741,698],{"class":663},[409,743,744],{"class":411,"line":569},[409,745,513],{"emptyLinePlaceholder":512},[409,747,749,752,755,758,762,764,767,769],{"class":411,"line":748},11,[409,750,751],{"class":477},"const",[409,753,754],{"class":419}," props",[409,756,757],{"class":548}," =",[409,759,761],{"class":760},"sKpYG"," defineProps",[409,763,604],{"class":440},[409,765,766],{"class":444},"IriProp",[409,768,622],{"class":440},[409,770,771],{"class":415},"()\n",[409,773,775,777,779,782,785,788,790,792,794,796,799,802,804,806,809,812],{"class":411,"line":774},12,[409,776,751],{"class":477},[409,778,681],{"class":440},[409,780,781],{"class":419}," getResource",[409,783,784],{"class":440},",",[409,786,787],{"class":419}," exposeMeta",[409,789,687],{"class":440},[409,791,757],{"class":548},[409,793,730],{"class":760},[409,795,441],{"class":415},[409,797,798],{"class":760},"toRef",[409,800,801],{"class":415},"(props",[409,803,784],{"class":440},[409,805,693],{"class":663},[409,807,808],{"class":667},"iri",[409,810,811],{"class":663},"'",[409,813,814],{"class":415},"))\n",[409,816,818,820,823,825,827],{"class":411,"line":817},13,[409,819,751],{"class":477},[409,821,822],{"class":419}," resource",[409,824,757],{"class":548},[409,826,781],{"class":760},[409,828,771],{"class":415},[409,830,832,835],{"class":411,"line":831},14,[409,833,834],{"class":760},"defineExpose",[409,836,837],{"class":415},"(exposeMeta)\n",[409,839,841,843,845],{"class":411,"line":840},15,[409,842,628],{"class":440},[409,844,651],{"class":607},[409,846,611],{"class":440},[356,848,849,850,853,854,857],{},"The module passes the component's IRI as a prop. ",[406,851,852],{},"useCwaResource"," fetches and subscribes to the resource. ",[406,855,856],{},"defineExpose(exposeMeta)"," wires the component into the admin manager.",[351,859,861],{"id":860},"the-admin-tab","The Admin Tab",[356,863,864],{},"An admin tab is a separate Vue file that renders inside the manager panel when this component is selected in edit mode.",[399,866,868],{"className":589,"code":867,"language":591,"meta":404,"style":404},"\u003C!-- app\u002Fcwa\u002Fcomponents\u002FTitle\u002Fadmin\u002FTitle.vue -->\n\u003Ctemplate>\n  \u003CCwaUiFormLabelWrapper label=\"Title\">\n    \u003CCwaUiFormInput v-model=\"titleModel.model.value\" \u002F>\n  \u003C\u002FCwaUiFormLabelWrapper>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { useCwaResourceManagerTab, useCwaResourceModel } from '#imports'\n\nconst { exposeMeta, iri } = useCwaResourceManagerTab({ name: 'Title' })\nconst titleModel = useCwaResourceModel\u003Cstring>(iri, 'title')\ndefineExpose(exposeMeta)\n\u003C\u002Fscript>\n",[406,869,870,875,883,904,927,936,944,948,968,992,996,1037,1069,1075],{"__ignoreMap":404},[409,871,872],{"class":411,"line":412},[409,873,874],{"class":598},"\u003C!-- app\u002Fcwa\u002Fcomponents\u002FTitle\u002Fadmin\u002FTitle.vue -->\n",[409,876,877,879,881],{"class":411,"line":432},[409,878,604],{"class":440},[409,880,608],{"class":607},[409,882,611],{"class":440},[409,884,885,887,890,893,895,897,900,902],{"class":411,"line":459},[409,886,616],{"class":440},[409,888,889],{"class":607},"CwaUiFormLabelWrapper",[409,891,892],{"class":654}," label",[409,894,561],{"class":440},[409,896,664],{"class":663},[409,898,899],{"class":667},"Title",[409,901,664],{"class":663},[409,903,611],{"class":440},[409,905,906,909,912,915,917,919,922,924],{"class":411,"line":474},[409,907,908],{"class":440},"    \u003C",[409,910,911],{"class":607},"CwaUiFormInput",[409,913,914],{"class":654}," v-model",[409,916,561],{"class":440},[409,918,664],{"class":663},[409,920,921],{"class":667},"titleModel.model.value",[409,923,664],{"class":663},[409,925,926],{"class":440}," \u002F>\n",[409,928,929,932,934],{"class":411,"line":490},[409,930,931],{"class":440},"  \u003C\u002F",[409,933,889],{"class":607},[409,935,611],{"class":440},[409,937,938,940,942],{"class":411,"line":496},[409,939,628],{"class":440},[409,941,608],{"class":607},[409,943,611],{"class":440},[409,945,946],{"class":411,"line":509},[409,947,513],{"emptyLinePlaceholder":512},[409,949,950,952,954,956,958,960,962,964,966],{"class":411,"line":516},[409,951,604],{"class":440},[409,953,651],{"class":607},[409,955,655],{"class":654},[409,957,658],{"class":654},[409,959,561],{"class":440},[409,961,664],{"class":663},[409,963,668],{"class":667},[409,965,664],{"class":663},[409,967,611],{"class":440},[409,969,970,972,974,977,979,982,984,986,988,990],{"class":411,"line":542},[409,971,678],{"class":677},[409,973,681],{"class":440},[409,975,976],{"class":415}," useCwaResourceManagerTab",[409,978,784],{"class":440},[409,980,981],{"class":415}," useCwaResourceModel",[409,983,687],{"class":440},[409,985,690],{"class":677},[409,987,693],{"class":663},[409,989,739],{"class":667},[409,991,698],{"class":663},[409,993,994],{"class":411,"line":569},[409,995,513],{"emptyLinePlaceholder":512},[409,997,998,1000,1002,1004,1006,1009,1011,1013,1015,1017,1020,1024,1026,1028,1030,1032,1034],{"class":411,"line":748},[409,999,751],{"class":477},[409,1001,681],{"class":440},[409,1003,787],{"class":419},[409,1005,784],{"class":440},[409,1007,1008],{"class":419}," iri",[409,1010,687],{"class":440},[409,1012,757],{"class":548},[409,1014,976],{"class":760},[409,1016,441],{"class":415},[409,1018,1019],{"class":440},"{",[409,1021,1023],{"class":1022},"sDHlG"," name",[409,1025,448],{"class":440},[409,1027,693],{"class":663},[409,1029,899],{"class":667},[409,1031,811],{"class":663},[409,1033,687],{"class":440},[409,1035,1036],{"class":415},")\n",[409,1038,1039,1041,1044,1046,1048,1050,1053,1055,1058,1060,1062,1065,1067],{"class":411,"line":774},[409,1040,751],{"class":477},[409,1042,1043],{"class":419}," titleModel",[409,1045,757],{"class":548},[409,1047,981],{"class":760},[409,1049,604],{"class":440},[409,1051,552],{"class":1052},"sbW4m",[409,1054,622],{"class":440},[409,1056,1057],{"class":415},"(iri",[409,1059,784],{"class":440},[409,1061,693],{"class":663},[409,1063,1064],{"class":667},"title",[409,1066,811],{"class":663},[409,1068,1036],{"class":415},[409,1070,1071,1073],{"class":411,"line":817},[409,1072,834],{"class":760},[409,1074,837],{"class":415},[409,1076,1077,1079,1081],{"class":411,"line":831},[409,1078,628],{"class":440},[409,1080,651],{"class":607},[409,1082,611],{"class":440},[356,1084,1085,1086,1089],{},"The ",[406,1087,1088],{},"v-model"," binding sends a debounced PATCH to the API every time the admin types. No save button needed.",[351,1091,1093],{"id":1092},"component-patterns","Component Patterns",[356,1095,1096],{},"Looking at real-world usage, a few patterns come up constantly:",[1098,1099,1100,1116],"table",{},[1101,1102,1103],"thead",{},[1104,1105,1106,1110,1113],"tr",{},[1107,1108,1109],"th",{},"Pattern",[1107,1111,1112],{},"Example",[1107,1114,1115],{},"What it needs",[1117,1118,1119,1136,1152,1165,1176,1190],"tbody",{},[1104,1120,1121,1125,1128],{},[1122,1123,1124],"td",{},"Text field",[1122,1126,1127],{},"Title, TextBlock",[1122,1129,1130,1132,1133],{},[406,1131,852],{}," + ",[406,1134,1135],{},"useCwaResourceModel",[1104,1137,1138,1141,1144],{},[1122,1139,1140],{},"Image upload",[1122,1142,1143],{},"Image, HeroSection",[1122,1145,1146,1132,1149],{},[406,1147,1148],{},"useCwaImageResource",[406,1150,1151],{},"useCwaResourceUpload",[1104,1153,1154,1157,1160],{},[1122,1155,1156],{},"Rich text",[1122,1158,1159],{},"HtmlContent",[1122,1161,1162,1164],{},[406,1163,852],{}," + TipTap editor in admin",[1104,1166,1167,1170,1173],{},[1122,1168,1169],{},"Link",[1122,1171,1172],{},"NavigationLink",[1122,1174,1175],{},"Text + Route\u002FURL fields",[1104,1177,1178,1181,1184],{},[1122,1179,1180],{},"Parent + children",[1122,1182,1183],{},"Accordion, Gallery",[1122,1185,1186,1189],{},[406,1187,1188],{},"CwaComponentGroup"," inside the parent component",[1104,1191,1192,1195,1198],{},[1122,1193,1194],{},"Collection listing",[1122,1196,1197],{},"Blog list",[1122,1199,1200,1201,1204],{},"Built-in ",[406,1202,1203],{},"Collection"," component",[356,1206,1207,1208,1211],{},"Each of these is covered in detail in the ",[1209,1210,15],"a",{"href":21}," section with step-by-step instructions.",[351,1213,32],{"id":1214},"alternative-ui-variants",[356,1216,1217,1218,1220],{},"A component can have multiple visual representations. The same ",[406,1219,1172],{}," data might render as a plain text link, a filled button, or a YouTube icon depending on what an admin selects.",[356,1222,1223],{},"There are two ways to provide variants:",[1225,1226,1227,1236],"ol",{},[371,1228,1229,1232,1233],{},[360,1230,1231],{},"Style classes"," — apply different Tailwind classes based on the selected ",[406,1234,1235],{},"uiClassNames",[371,1237,1238,1241,1242,1245],{},[360,1239,1240],{},"UI directory"," — create ",[406,1243,1244],{},"app\u002Fcwa\u002Fcomponents\u002FTitle\u002Fui\u002FAlternativeName.vue"," as a full alternative template",[356,1247,1248,1249,1251],{},"Both approaches are covered in the ",[1209,1250,32],{"href":33}," guide.",[351,1253,1255],{"id":1254},"publishing","Publishing",[356,1257,1258,1259,1262],{},"Most components use the ",[406,1260,1261],{},"#[Silverback\\Publishable]"," annotation. This means:",[368,1264,1265,1272,1278],{},[371,1266,1267,1268,1271],{},"Admins edit a ",[360,1269,1270],{},"draft"," version — the live site is unaffected",[371,1273,1274,1275],{},"Changes become live when the admin clicks ",[360,1276,1277],{},"Publish",[371,1279,1280],{},"Mercure broadcasts the update so visitors see the new content in real-time",[356,1282,1283,1284,1287],{},"See ",[1209,1285,1286],{"href":63},"Draft & Publish"," for details.",[1289,1290,1291],"style",{},"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 .sBtbT, html code.shiki .sBtbT{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#89DDFF}html pre.shiki code .sOvfz, html code.shiki .sOvfz{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#89DDFF}html pre.shiki code .sRCss, html code.shiki .sRCss{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#FFCB6B}html pre.shiki code .swB56, html code.shiki .swB56{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#C792EA}html pre.shiki code .stmX-, html code.shiki .stmX-{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#F78C6C}html pre.shiki code .sVlFx, html code.shiki .sVlFx{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#89DDFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sTBSN, html code.shiki .sTBSN{--shiki-light:#6A737D;--shiki-light-font-style:inherit;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .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 .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 .sKpYG, html code.shiki .sKpYG{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#82AAFF}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}",{"title":404,"searchDepth":432,"depth":432,"links":1293},[1294,1295,1299,1300,1301,1302],{"id":353,"depth":432,"text":354},{"id":391,"depth":432,"text":392,"children":1296},[1297,1298],{"id":396,"depth":459,"text":397},{"id":585,"depth":459,"text":586},{"id":860,"depth":432,"text":861},{"id":1092,"depth":432,"text":1093},{"id":1214,"depth":432,"text":32},{"id":1254,"depth":432,"text":1255},"The atomic content unit in CWA — what a component is, what it consists of, and the patterns you'll use most.","md",null,{},{"title":58,"description":1303},"ofvWR2hvG0PnWRfC0x3CI24OjyvS5PNWfJCODzL6blo",[1310,1312],{"title":54,"path":55,"stem":56,"description":1311,"children":-1},"How PageData records drive template pages — the pattern for blogs, events, products, and any repeating content type.",{"title":62,"path":63,"stem":64,"description":1313,"children":-1},"How admins edit draft versions of components without touching the live site, then publish when ready.",1782241278654]