[{"data":1,"prerenderedAt":1282},["ShallowReactive",2],{"navigation":3,"\u002Fcore-concepts\u002Fcomponents":358,"\u002Fcore-concepts\u002Fcomponents-surround":1277},[4,14,36,69,140,341],{"title":5,"path":6,"stem":7,"children":8},"Introduction","\u002Fgetting-started","1.getting-started\u002F1.index",[9,10],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":15,"path":16,"stem":17,"children":18,"page":35},"Guides","\u002Fguides","2.guides",[19,23,27,31],{"title":20,"path":21,"stem":22},"Your First Layout","\u002Fguides\u002Fyour-first-layout","2.guides\u002F1.your-first-layout",{"title":24,"path":25,"stem":26},"Your First Page Template","\u002Fguides\u002Fyour-first-page-template","2.guides\u002F2.your-first-page-template",{"title":28,"path":29,"stem":30},"Your First Component","\u002Fguides\u002Fyour-first-component","2.guides\u002F3.your-first-component",{"title":32,"path":33,"stem":34},"Alternative UI Variants","\u002Fguides\u002Falternative-ui-variants","2.guides\u002F4.alternative-ui-variants",false,{"title":37,"path":38,"stem":39,"children":40,"page":35},"Core Concepts","\u002Fcore-concepts","3.core-concepts",[41,45,49,53,57,61,65],{"title":42,"path":43,"stem":44},"How It All Works","\u002Fcore-concepts\u002Farchitecture","3.core-concepts\u002F1.architecture",{"title":46,"path":47,"stem":48},"The Data Model","\u002Fcore-concepts\u002Fthe-data-model","3.core-concepts\u002F2.the-data-model",{"title":50,"path":51,"stem":52},"Layouts & Pages","\u002Fcore-concepts\u002Flayouts-and-pages","3.core-concepts\u002F3.layouts-and-pages",{"title":54,"path":55,"stem":56},"Dynamic Pages","\u002Fcore-concepts\u002Fdynamic-pages","3.core-concepts\u002F4.dynamic-pages",{"title":58,"path":59,"stem":60},"Components","\u002Fcore-concepts\u002Fcomponents","3.core-concepts\u002F5.components",{"title":62,"path":63,"stem":64},"Draft & Publish Workflow","\u002Fcore-concepts\u002Fdraft-and-publish","3.core-concepts\u002F6.draft-and-publish",{"title":66,"path":67,"stem":68},"The Admin Panel","\u002Fcore-concepts\u002Fadmin-panel","3.core-concepts\u002F7.admin-panel",{"title":70,"path":71,"stem":72,"children":73,"page":35},"Api","\u002Fapi","4.api",[74,78,116,120,124,128,132,136],{"title":75,"path":76,"stem":77},"Bundle Setup","\u002Fapi\u002Fbundle-setup","4.api\u002F1.bundle-setup",{"title":58,"path":79,"stem":80,"children":81,"page":35},"\u002Fapi\u002Fcomponents","4.api\u002F2.components",[82,86,103],{"title":83,"path":84,"stem":85},"Creating Components","\u002Fapi\u002Fcomponents\u002Fcreating-components","4.api\u002F2.components\u002F1.creating-components",{"title":87,"path":88,"stem":89,"children":90,"page":35},"Annotations","\u002Fapi\u002Fcomponents\u002Fannotations","4.api\u002F2.components\u002F2.annotations",[91,95,99],{"title":92,"path":93,"stem":94},"Publishable","\u002Fapi\u002Fcomponents\u002Fannotations\u002Fpublishable","4.api\u002F2.components\u002F2.annotations\u002F1.publishable",{"title":96,"path":97,"stem":98},"Uploadable","\u002Fapi\u002Fcomponents\u002Fannotations\u002Fuploadable","4.api\u002F2.components\u002F2.annotations\u002F2.uploadable",{"title":100,"path":101,"stem":102},"Timestamped","\u002Fapi\u002Fcomponents\u002Fannotations\u002Ftimestamped","4.api\u002F2.components\u002F2.annotations\u002F3.timestamped",{"title":104,"path":105,"stem":106,"children":107,"page":35},"Built Ins","\u002Fapi\u002Fcomponents\u002Fbuilt-ins","4.api\u002F2.components\u002F3.built-ins",[108,112],{"title":109,"path":110,"stem":111},"Collection Component","\u002Fapi\u002Fcomponents\u002Fbuilt-ins\u002Fcollection-component","4.api\u002F2.components\u002F3.built-ins\u002F1.collection-component",{"title":113,"path":114,"stem":115},"Form Component","\u002Fapi\u002Fcomponents\u002Fbuilt-ins\u002Fform-component","4.api\u002F2.components\u002F3.built-ins\u002F2.form-component",{"title":117,"path":118,"stem":119},"Dynamic & Nested Pages","\u002Fapi\u002Fdynamic-pages","4.api\u002F3.dynamic-pages",{"title":121,"path":122,"stem":123},"Users & Security","\u002Fapi\u002Fusers-and-security","4.api\u002F4.users-and-security",{"title":125,"path":126,"stem":127},"Data Fixtures","\u002Fapi\u002Fdata-fixtures","4.api\u002F5.data-fixtures",{"title":129,"path":130,"stem":131},"Configuration Reference","\u002Fapi\u002Fconfiguration","4.api\u002F6.configuration",{"title":133,"path":134,"stem":135},"Console Commands","\u002Fapi\u002Fconsole-commands","4.api\u002F7.console-commands",{"title":137,"path":138,"stem":139},"Debugging & Profiler","\u002Fapi\u002Fdebugging","4.api\u002F8.debugging",{"title":141,"path":142,"stem":143,"children":144,"page":35},"Nuxt Module","\u002Fnuxt-module","5.nuxt-module",[145,149,162,182,207,211,295,320,324],{"title":146,"path":147,"stem":148},"Module Setup","\u002Fnuxt-module\u002Fmodule-setup","5.nuxt-module\u002F1.module-setup",{"title":150,"path":151,"stem":152,"children":153,"page":35},"Configuration","\u002Fnuxt-module\u002Fconfiguration","5.nuxt-module\u002F2.configuration",[154,158],{"title":155,"path":156,"stem":157},"Nuxt Config","\u002Fnuxt-module\u002Fconfiguration\u002Fnuxt-config","5.nuxt-module\u002F2.configuration\u002F1.nuxt-config",{"title":159,"path":160,"stem":161},"Site Config & SEO","\u002Fnuxt-module\u002Fconfiguration\u002Fsite-config-and-seo","5.nuxt-module\u002F2.configuration\u002F2.site-config-and-seo",{"title":163,"path":164,"stem":165,"children":166,"page":35},"Building Your Ui","\u002Fnuxt-module\u002Fbuilding-your-ui","5.nuxt-module\u002F3.building-your-ui",[167,171,175,178],{"title":168,"path":169,"stem":170},"Layouts","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-layouts","5.nuxt-module\u002F3.building-your-ui\u002F1.creating-layouts",{"title":172,"path":173,"stem":174},"Page Templates","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-page-templates","5.nuxt-module\u002F3.building-your-ui\u002F2.creating-page-templates",{"title":83,"path":176,"stem":177},"\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-components","5.nuxt-module\u002F3.building-your-ui\u002F3.creating-components",{"title":179,"path":180,"stem":181},"CLI Generator","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcwa-cli","5.nuxt-module\u002F3.building-your-ui\u002F4.cwa-cli",{"title":183,"path":184,"stem":185,"children":186,"page":35},"Cwa Components","\u002Fnuxt-module\u002Fcwa-components","5.nuxt-module\u002F4.cwa-components",[187,191,195,199,203],{"title":188,"path":189,"stem":190},"\u003CCwaComponentGroup \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-component-group","5.nuxt-module\u002F4.cwa-components\u002F1.cwa-component-group",{"title":192,"path":193,"stem":194},"\u003CCwaPage \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-page","5.nuxt-module\u002F4.cwa-components\u002F2.cwa-page",{"title":196,"path":197,"stem":198},"\u003CCwaLink \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-link","5.nuxt-module\u002F4.cwa-components\u002F3.cwa-link",{"title":200,"path":201,"stem":202},"\u003CCwaImage \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-image","5.nuxt-module\u002F4.cwa-components\u002F4.cwa-image",{"title":204,"path":205,"stem":206},"\u003CCwaDefaultLayout \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-default-layout","5.nuxt-module\u002F4.cwa-components\u002F5.cwa-default-layout",{"title":208,"path":209,"stem":210},"The useCwa() API","\u002Fnuxt-module\u002Fcwa-api","5.nuxt-module\u002F5.cwa-api",{"title":212,"path":213,"stem":214,"children":215,"page":35},"Composables","\u002Fnuxt-module\u002Fcomposables","5.nuxt-module\u002F6.composables",[216,224,261,278],{"title":217,"path":218,"stem":219,"children":220,"page":35},"Layout","\u002Fnuxt-module\u002Fcomposables\u002Flayout","5.nuxt-module\u002F6.composables\u002F0.layout",[221],{"title":217,"path":222,"stem":223},"\u002Fnuxt-module\u002Fcomposables\u002Flayout\u002Fuse-cwa-layout","5.nuxt-module\u002F6.composables\u002F0.layout\u002F1.use-cwa-layout",{"title":225,"path":226,"stem":227,"children":228,"page":35},"Component","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent","5.nuxt-module\u002F6.composables\u002F1.component",[229,233,237,241,245,249,253,257],{"title":230,"path":231,"stem":232},"Component (recommended)","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-component","5.nuxt-module\u002F6.composables\u002F1.component\u002F0.use-cwa-component",{"title":234,"path":235,"stem":236},"Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F1.use-cwa-resource",{"title":238,"path":239,"stem":240},"Collection Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-collection-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F2.use-cwa-collection-resource",{"title":242,"path":243,"stem":244},"Image Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-image-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F3.use-cwa-image-resource",{"title":246,"path":247,"stem":248},"Form","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form","5.nuxt-module\u002F6.composables\u002F1.component\u002F4.use-cwa-form",{"title":250,"path":251,"stem":252},"Form Input","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-input","5.nuxt-module\u002F6.composables\u002F1.component\u002F5.use-cwa-form-input",{"title":254,"path":255,"stem":256},"Form Repeated","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-repeated","5.nuxt-module\u002F6.composables\u002F1.component\u002F6.use-cwa-form-repeated",{"title":258,"path":259,"stem":260},"Form Collection","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-collection","5.nuxt-module\u002F6.composables\u002F1.component\u002F7.use-cwa-form-collection",{"title":262,"path":263,"stem":264,"children":265,"page":35},"Admin Manager","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager","5.nuxt-module\u002F6.composables\u002F2.admin-manager",[266,270,274],{"title":267,"path":268,"stem":269},"Manager Tab","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-manager-tab","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F1.use-cwa-resource-manager-tab",{"title":271,"path":272,"stem":273},"Resource Model","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-model","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F2.use-cwa-resource-model",{"title":275,"path":276,"stem":277},"Resource Upload","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-upload","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F3.use-cwa-resource-upload",{"title":279,"path":280,"stem":281,"children":282,"page":35},"Utilities","\u002Fnuxt-module\u002Fcomposables\u002Futilities","5.nuxt-module\u002F6.composables\u002F3.utilities",[283,287,291],{"title":284,"path":285,"stem":286},"Resource Endpoint","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-cwa-resource-endpoint","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F1.use-cwa-resource-endpoint",{"title":288,"path":289,"stem":290},"Query Model","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-query-bound-model","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F2.use-query-bound-model",{"title":292,"path":293,"stem":294},"Resource Route","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-cwa-resource-route","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F3.use-cwa-resource-route",{"title":296,"path":297,"stem":298,"children":299,"page":35},"Component Helpers","\u002Fnuxt-module\u002Fcomponent-helpers","5.nuxt-module\u002F7.component-helpers",[300,304,308,312,316],{"title":301,"path":302,"stem":303},"Images & Media","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fimages-and-uploads","5.nuxt-module\u002F7.component-helpers\u002F1.images-and-uploads",{"title":305,"path":306,"stem":307},"Collections & Pagination","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fcollections-and-pagination","5.nuxt-module\u002F7.component-helpers\u002F2.collections-and-pagination",{"title":309,"path":310,"stem":311},"HTML Content","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fhtml-content","5.nuxt-module\u002F7.component-helpers\u002F3.html-content",{"title":313,"path":314,"stem":315},"Real-Time Updates","\u002Fnuxt-module\u002Fcomponent-helpers\u002Freal-time-updates","5.nuxt-module\u002F7.component-helpers\u002F4.real-time-updates",{"title":317,"path":318,"stem":319},"Forms","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fforms","5.nuxt-module\u002F7.component-helpers\u002F5.forms",{"title":321,"path":322,"stem":323},"Authentication","\u002Fnuxt-module\u002Fauthentication","5.nuxt-module\u002F8.authentication",{"title":325,"path":326,"stem":327,"children":328,"page":35},"Cwa Layer","\u002Fnuxt-module\u002Fcwa-layer","5.nuxt-module\u002F9.cwa-layer",[329,333,337],{"title":330,"path":331,"stem":332},"Overview","\u002Fnuxt-module\u002Fcwa-layer\u002Foverview","5.nuxt-module\u002F9.cwa-layer\u002F1.overview",{"title":334,"path":335,"stem":336},"Auth Pages","\u002Fnuxt-module\u002Fcwa-layer\u002Fauth-pages","5.nuxt-module\u002F9.cwa-layer\u002F2.auth-pages",{"title":338,"path":339,"stem":340},"Admin Panel","\u002Fnuxt-module\u002Fcwa-layer\u002Fadmin-panel","5.nuxt-module\u002F9.cwa-layer\u002F3.admin-panel",{"title":342,"path":343,"stem":344,"children":345,"page":35},"Deployment","\u002Fdeployment","6.deployment",[346,350,354],{"title":347,"path":348,"stem":349},"Docker","\u002Fdeployment\u002Fdocker","6.deployment\u002F1.docker",{"title":351,"path":352,"stem":353},"Kubernetes & Helm","\u002Fdeployment\u002Fkubernetes","6.deployment\u002F2.kubernetes",{"title":355,"path":356,"stem":357},"CI\u002FCD","\u002Fdeployment\u002Fci-cd","6.deployment\u002F3.ci-cd",{"id":359,"title":58,"badge":360,"body":363,"description":1271,"extension":1272,"links":1273,"meta":1274,"navigation":528,"path":59,"seo":1275,"stem":60,"__hash__":1276},"docs\u002F3.core-concepts\u002F5.components.md",{"label":361,"color":362},"Draft","amber",{"type":364,"value":365,"toc":1260},"minimark",[366,371,380,383,405,409,414,589,599,603,811,822,826,829,1049,1056,1060,1063,1173,1180,1183,1189,1192,1214,1220,1224,1231,1249,1256],[367,368,370],"h2",{"id":369},"what-is-a-component","What Is a Component?",[372,373,374,375,379],"p",{},"A component is the ",[376,377,378],"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.",[372,381,382],{},"Components are:",[384,385,386,393,399],"ul",{},[387,388,389,392],"li",{},[376,390,391],{},"Stored in the API"," as entities in your database (each type is a PHP class)",[387,394,395,398],{},[376,396,397],{},"Rendered by the Nuxt module"," using matching Vue files",[387,400,401,404],{},[376,402,403],{},"Edited inline"," in the browser by admins without leaving the page",[367,406,408],{"id":407},"a-component-has-two-sides","A Component Has Two Sides",[410,411,413],"h3",{"id":412},"_1-the-php-entity-the-data","1. The PHP entity (the data)",[415,416,421],"pre",{"className":417,"code":418,"language":419,"meta":420,"style":420},"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","",[422,423,424,446,473,488,504,510,523,530,556,583],"code",{"__ignoreMap":420},[425,426,429,433,437,441,443],"span",{"class":427,"line":428},"line",1,[425,430,432],{"class":431},"sPB8G","#[",[425,434,436],{"class":435},"sc2zw","Silverback",[425,438,440],{"class":439},"sBtbT","\\",[425,442,92],{"class":435},[425,444,445],{"class":431},"]\n",[425,447,449,451,454,458,462,465,468,471],{"class":427,"line":448},2,[425,450,432],{"class":431},[425,452,453],{"class":435},"ApiResource",[425,455,457],{"class":456},"sOvfz","(",[425,459,461],{"class":460},"sRCss","mercure",[425,463,464],{"class":456},":",[425,466,467],{"class":439}," true",[425,469,470],{"class":456},")",[425,472,445],{"class":431},[425,474,476,478,481,483,486],{"class":427,"line":475},3,[425,477,432],{"class":431},[425,479,480],{"class":435},"ORM",[425,482,440],{"class":439},[425,484,485],{"class":435},"Entity",[425,487,445],{"class":431},[425,489,491,495,498,501],{"class":427,"line":490},4,[425,492,494],{"class":493},"swB56","class",[425,496,497],{"class":460}," Title",[425,499,500],{"class":493}," extends",[425,502,503],{"class":460}," AbstractComponent\n",[425,505,507],{"class":427,"line":506},5,[425,508,509],{"class":456},"{\n",[425,511,513,517,520],{"class":427,"line":512},6,[425,514,516],{"class":515},"stmX-","    use",[425,518,519],{"class":435}," PublishableTrait",[425,521,522],{"class":456},";\n",[425,524,526],{"class":427,"line":525},7,[425,527,529],{"emptyLinePlaceholder":528},true,"\n",[425,531,533,536,538,540,543,545,548,550,552,554],{"class":427,"line":532},8,[425,534,535],{"class":431},"    #[",[425,537,480],{"class":435},[425,539,440],{"class":439},[425,541,542],{"class":435},"Column",[425,544,457],{"class":456},[425,546,547],{"class":460},"nullable",[425,549,464],{"class":456},[425,551,467],{"class":439},[425,553,470],{"class":456},[425,555,445],{"class":431},[425,557,559,562,566,569,572,575,578,581],{"class":427,"line":558},9,[425,560,561],{"class":493},"    public",[425,563,565],{"class":564},"sVlFx"," ?",[425,567,568],{"class":515},"string",[425,570,571],{"class":456}," $",[425,573,574],{"class":431},"title ",[425,576,577],{"class":564},"=",[425,579,580],{"class":439}," null",[425,582,522],{"class":456},[425,584,586],{"class":427,"line":585},10,[425,587,588],{"class":456},"}\n",[372,590,591,594,595,598],{},[422,592,593],{},"AbstractComponent"," gives it identity (IRI, UUID) and the ",[422,596,597],{},"uiComponent"," field. You add your own data fields.",[410,600,602],{"id":601},"_2-the-vue-component-the-display","2. The Vue component (the display)",[415,604,608],{"className":605,"code":606,"language":607,"meta":420,"style":420},"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 type { IriProp } from '#cwa\u002Fcomposables\u002Fcwa-resource'\nimport { useCwaComponent } from '#imports'\n\nconst props = defineProps\u003CIriProp>()\nconst { resource, exposeMeta } = useCwaComponent(props)\ndefineExpose(exposeMeta)\n\u003C\u002Fscript>\n","vue",[422,609,610,616,628,649,657,661,689,719,739,743,768,793,802],{"__ignoreMap":420},[425,611,612],{"class":427,"line":428},[425,613,615],{"class":614},"sTBSN","\u003C!-- app\u002Fcwa\u002Fcomponents\u002FTitle\u002FTitle.vue -->\n",[425,617,618,621,625],{"class":427,"line":448},[425,619,620],{"class":456},"\u003C",[425,622,624],{"class":623},"s-h7I","template",[425,626,627],{"class":456},">\n",[425,629,630,633,636,639,642,645,647],{"class":427,"line":475},[425,631,632],{"class":456},"  \u003C",[425,634,635],{"class":623},"h1",[425,637,638],{"class":456},">",[425,640,641],{"class":431},"{{ resource?.data?.title || 'No Title' }}",[425,643,644],{"class":456},"\u003C\u002F",[425,646,635],{"class":623},[425,648,627],{"class":456},[425,650,651,653,655],{"class":427,"line":490},[425,652,644],{"class":456},[425,654,624],{"class":623},[425,656,627],{"class":456},[425,658,659],{"class":427,"line":506},[425,660,529],{"emptyLinePlaceholder":528},[425,662,663,665,668,672,675,677,681,685,687],{"class":427,"line":512},[425,664,620],{"class":456},[425,666,667],{"class":623},"script",[425,669,671],{"class":670},"sGtlX"," setup",[425,673,674],{"class":670}," lang",[425,676,577],{"class":456},[425,678,680],{"class":679},"seSrl","\"",[425,682,684],{"class":683},"sLL54","ts",[425,686,680],{"class":679},[425,688,627],{"class":456},[425,690,691,695,698,701,704,707,710,713,716],{"class":427,"line":525},[425,692,694],{"class":693},"sm4w6","import",[425,696,697],{"class":693}," type",[425,699,700],{"class":456}," {",[425,702,703],{"class":431}," IriProp",[425,705,706],{"class":456}," }",[425,708,709],{"class":693}," from",[425,711,712],{"class":679}," '",[425,714,715],{"class":683},"#cwa\u002Fcomposables\u002Fcwa-resource",[425,717,718],{"class":679},"'\n",[425,720,721,723,725,728,730,732,734,737],{"class":427,"line":532},[425,722,694],{"class":693},[425,724,700],{"class":456},[425,726,727],{"class":431}," useCwaComponent",[425,729,706],{"class":456},[425,731,709],{"class":693},[425,733,712],{"class":679},[425,735,736],{"class":683},"#imports",[425,738,718],{"class":679},[425,740,741],{"class":427,"line":558},[425,742,529],{"emptyLinePlaceholder":528},[425,744,745,748,751,754,758,760,763,765],{"class":427,"line":585},[425,746,747],{"class":493},"const",[425,749,750],{"class":435}," props",[425,752,753],{"class":564}," =",[425,755,757],{"class":756},"sKpYG"," defineProps",[425,759,620],{"class":456},[425,761,762],{"class":460},"IriProp",[425,764,638],{"class":456},[425,766,767],{"class":431},"()\n",[425,769,771,773,775,778,781,784,786,788,790],{"class":427,"line":770},11,[425,772,747],{"class":493},[425,774,700],{"class":456},[425,776,777],{"class":435}," resource",[425,779,780],{"class":456},",",[425,782,783],{"class":435}," exposeMeta",[425,785,706],{"class":456},[425,787,753],{"class":564},[425,789,727],{"class":756},[425,791,792],{"class":431},"(props)\n",[425,794,796,799],{"class":427,"line":795},12,[425,797,798],{"class":756},"defineExpose",[425,800,801],{"class":431},"(exposeMeta)\n",[425,803,805,807,809],{"class":427,"line":804},13,[425,806,644],{"class":456},[425,808,667],{"class":623},[425,810,627],{"class":456},[372,812,813,814,817,818,821],{},"The module passes the component's IRI as a prop. ",[422,815,816],{},"useCwaComponent"," fetches and subscribes to the resource. ",[422,819,820],{},"defineExpose(exposeMeta)"," wires the component into the admin manager.",[367,823,825],{"id":824},"the-admin-tab","The Admin Tab",[372,827,828],{},"An admin tab is a separate Vue file that renders inside the manager panel when this component is selected in edit mode.",[415,830,832],{"className":605,"code":831,"language":607,"meta":420,"style":420},"\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",[422,833,834,839,847,868,891,900,908,912,932,956,960,1002,1034,1040],{"__ignoreMap":420},[425,835,836],{"class":427,"line":428},[425,837,838],{"class":614},"\u003C!-- app\u002Fcwa\u002Fcomponents\u002FTitle\u002Fadmin\u002FTitle.vue -->\n",[425,840,841,843,845],{"class":427,"line":448},[425,842,620],{"class":456},[425,844,624],{"class":623},[425,846,627],{"class":456},[425,848,849,851,854,857,859,861,864,866],{"class":427,"line":475},[425,850,632],{"class":456},[425,852,853],{"class":623},"CwaUiFormLabelWrapper",[425,855,856],{"class":670}," label",[425,858,577],{"class":456},[425,860,680],{"class":679},[425,862,863],{"class":683},"Title",[425,865,680],{"class":679},[425,867,627],{"class":456},[425,869,870,873,876,879,881,883,886,888],{"class":427,"line":490},[425,871,872],{"class":456},"    \u003C",[425,874,875],{"class":623},"CwaUiFormInput",[425,877,878],{"class":670}," v-model",[425,880,577],{"class":456},[425,882,680],{"class":679},[425,884,885],{"class":683},"titleModel.model.value",[425,887,680],{"class":679},[425,889,890],{"class":456}," \u002F>\n",[425,892,893,896,898],{"class":427,"line":506},[425,894,895],{"class":456},"  \u003C\u002F",[425,897,853],{"class":623},[425,899,627],{"class":456},[425,901,902,904,906],{"class":427,"line":512},[425,903,644],{"class":456},[425,905,624],{"class":623},[425,907,627],{"class":456},[425,909,910],{"class":427,"line":525},[425,911,529],{"emptyLinePlaceholder":528},[425,913,914,916,918,920,922,924,926,928,930],{"class":427,"line":532},[425,915,620],{"class":456},[425,917,667],{"class":623},[425,919,671],{"class":670},[425,921,674],{"class":670},[425,923,577],{"class":456},[425,925,680],{"class":679},[425,927,684],{"class":683},[425,929,680],{"class":679},[425,931,627],{"class":456},[425,933,934,936,938,941,943,946,948,950,952,954],{"class":427,"line":558},[425,935,694],{"class":693},[425,937,700],{"class":456},[425,939,940],{"class":431}," useCwaResourceManagerTab",[425,942,780],{"class":456},[425,944,945],{"class":431}," useCwaResourceModel",[425,947,706],{"class":456},[425,949,709],{"class":693},[425,951,712],{"class":679},[425,953,736],{"class":683},[425,955,718],{"class":679},[425,957,958],{"class":427,"line":585},[425,959,529],{"emptyLinePlaceholder":528},[425,961,962,964,966,968,970,973,975,977,979,981,984,988,990,992,994,997,999],{"class":427,"line":770},[425,963,747],{"class":493},[425,965,700],{"class":456},[425,967,783],{"class":435},[425,969,780],{"class":456},[425,971,972],{"class":435}," iri",[425,974,706],{"class":456},[425,976,753],{"class":564},[425,978,940],{"class":756},[425,980,457],{"class":431},[425,982,983],{"class":456},"{",[425,985,987],{"class":986},"sDHlG"," name",[425,989,464],{"class":456},[425,991,712],{"class":679},[425,993,863],{"class":683},[425,995,996],{"class":679},"'",[425,998,706],{"class":456},[425,1000,1001],{"class":431},")\n",[425,1003,1004,1006,1009,1011,1013,1015,1018,1020,1023,1025,1027,1030,1032],{"class":427,"line":795},[425,1005,747],{"class":493},[425,1007,1008],{"class":435}," titleModel",[425,1010,753],{"class":564},[425,1012,945],{"class":756},[425,1014,620],{"class":456},[425,1016,568],{"class":1017},"sbW4m",[425,1019,638],{"class":456},[425,1021,1022],{"class":431},"(iri",[425,1024,780],{"class":456},[425,1026,712],{"class":679},[425,1028,1029],{"class":683},"title",[425,1031,996],{"class":679},[425,1033,1001],{"class":431},[425,1035,1036,1038],{"class":427,"line":804},[425,1037,798],{"class":756},[425,1039,801],{"class":431},[425,1041,1043,1045,1047],{"class":427,"line":1042},14,[425,1044,644],{"class":456},[425,1046,667],{"class":623},[425,1048,627],{"class":456},[372,1050,1051,1052,1055],{},"The ",[422,1053,1054],{},"v-model"," binding sends a debounced PATCH to the API every time the admin types. No save button needed.",[367,1057,1059],{"id":1058},"component-patterns","Component Patterns",[372,1061,1062],{},"Looking at real-world usage, a few patterns come up constantly:",[1064,1065,1066,1082],"table",{},[1067,1068,1069],"thead",{},[1070,1071,1072,1076,1079],"tr",{},[1073,1074,1075],"th",{},"Pattern",[1073,1077,1078],{},"Example",[1073,1080,1081],{},"What it needs",[1083,1084,1085,1102,1120,1133,1144,1158],"tbody",{},[1070,1086,1087,1091,1094],{},[1088,1089,1090],"td",{},"Text field",[1088,1092,1093],{},"Title, TextBlock",[1088,1095,1096,1098,1099],{},[422,1097,816],{}," + ",[422,1100,1101],{},"useCwaResourceModel",[1070,1103,1104,1107,1110],{},[1088,1105,1106],{},"Image upload",[1088,1108,1109],{},"Image, HeroSection",[1088,1111,1112,1098,1114,1098,1117],{},[422,1113,816],{},[422,1115,1116],{},"withImage()",[422,1118,1119],{},"useCwaResourceUpload",[1070,1121,1122,1125,1128],{},[1088,1123,1124],{},"Rich text",[1088,1126,1127],{},"HtmlContent",[1088,1129,1130,1132],{},[422,1131,816],{}," + TipTap editor in admin",[1070,1134,1135,1138,1141],{},[1088,1136,1137],{},"Link",[1088,1139,1140],{},"NavigationLink",[1088,1142,1143],{},"Text + Route\u002FURL fields",[1070,1145,1146,1149,1152],{},[1088,1147,1148],{},"Parent + children",[1088,1150,1151],{},"Accordion, Gallery",[1088,1153,1154,1157],{},[422,1155,1156],{},"CwaComponentGroup"," inside the parent component",[1070,1159,1160,1163,1166],{},[1088,1161,1162],{},"Collection listing",[1088,1164,1165],{},"Blog list",[1088,1167,1168,1169,1172],{},"Built-in ",[422,1170,1171],{},"Collection"," component",[372,1174,1175,1176,1179],{},"Each of these is covered in detail in the ",[1177,1178,15],"a",{"href":21}," section with step-by-step instructions.",[367,1181,32],{"id":1182},"alternative-ui-variants",[372,1184,1185,1186,1188],{},"A component can have multiple visual representations. The same ",[422,1187,1140],{}," data might render as a plain text link, a filled button, or a YouTube icon depending on what an admin selects.",[372,1190,1191],{},"There are two ways to provide variants:",[1193,1194,1195,1204],"ol",{},[387,1196,1197,1200,1201],{},[376,1198,1199],{},"Style classes"," — apply different Tailwind classes based on the selected ",[422,1202,1203],{},"uiClassNames",[387,1205,1206,1209,1210,1213],{},[376,1207,1208],{},"UI directory"," — create ",[422,1211,1212],{},"app\u002Fcwa\u002Fcomponents\u002FTitle\u002Fui\u002FAlternativeName.vue"," as a full alternative template",[372,1215,1216,1217,1219],{},"Both approaches are covered in the ",[1177,1218,32],{"href":33}," guide.",[367,1221,1223],{"id":1222},"publishing","Publishing",[372,1225,1226,1227,1230],{},"Most components use the ",[422,1228,1229],{},"#[Silverback\\Publishable]"," annotation. This means:",[384,1232,1233,1240,1246],{},[387,1234,1235,1236,1239],{},"Admins edit a ",[376,1237,1238],{},"draft"," version — the live site is unaffected",[387,1241,1242,1243],{},"Changes become live when the admin clicks ",[376,1244,1245],{},"Publish",[387,1247,1248],{},"Mercure broadcasts the update so visitors see the new content in real-time",[372,1250,1251,1252,1255],{},"See ",[1177,1253,1254],{"href":63},"Draft & Publish"," for details.",[1257,1258,1259],"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":420,"searchDepth":448,"depth":448,"links":1261},[1262,1263,1267,1268,1269,1270],{"id":369,"depth":448,"text":370},{"id":407,"depth":448,"text":408,"children":1264},[1265,1266],{"id":412,"depth":475,"text":413},{"id":601,"depth":475,"text":602},{"id":824,"depth":448,"text":825},{"id":1058,"depth":448,"text":1059},{"id":1182,"depth":448,"text":32},{"id":1222,"depth":448,"text":1223},"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":1271},"G3msJInSkVC2KoAaEGtHjJGis5QT-37dQ0oaozBj5Dk",[1278,1280],{"title":54,"path":55,"stem":56,"description":1279,"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":1281,"children":-1},"How admins edit draft versions of components without touching the live site, then publish when ready.",1782512894926]