[{"data":1,"prerenderedAt":1822},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Fyour-first-component":342,"\u002Fguides\u002Fyour-first-component-surround":1817},[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":28,"badge":344,"body":347,"description":1811,"extension":1812,"links":1813,"meta":1814,"navigation":427,"path":29,"seo":1815,"stem":30,"__hash__":1816},"docs\u002F2.guides\u002F3.your-first-component.md",{"label":345,"color":346},"Draft","amber",{"type":348,"value":349,"toc":1797},"minimark",[350,354,377,385,388,393,400,819,822,861,864,886,888,892,897,1166,1171,1182,1202,1218,1230,1246,1248,1252,1257,1472,1476,1495,1513,1521,1528,1530,1534,1684,1687,1689,1693,1735,1737,1741,1746,1748,1752,1759,1762,1769,1771,1775,1793],[351,352,353],"p",{},"A complete component has three parts:",[355,356,357,365,371],"ol",{},[358,359,360,364],"li",{},[361,362,363],"strong",{},"The PHP entity"," — defines the data stored in the API",[358,366,367,370],{},[361,368,369],{},"The Vue display component"," — how it looks on the front end",[358,372,373,376],{},[361,374,375],{},"The admin tab"," — the editing form shown in the inline CMS",[351,378,379,380,384],{},"We'll build a ",[381,382,383],"code",{},"Title"," component — a simple heading with a text field.",[386,387],"hr",{},[389,390,392],"h2",{"id":391},"step-1-the-php-entity","Step 1: The PHP Entity",[351,394,395,396,399],{},"Create ",[381,397,398],{},"api\u002Fsrc\u002FEntity\u002FTitle.php",":",[401,402,407],"pre",{"className":403,"code":404,"language":405,"meta":406,"style":406},"language-php shiki shiki-themes github-light github-dark material-theme-palenight","\u003C?php\n\nnamespace App\\Entity;\n\nuse ApiPlatform\\Metadata\\ApiResource;\nuse Doctrine\\ORM\\Mapping as ORM;\nuse Silverback\\ApiComponentsBundle\\Annotation as Silverback;\nuse Silverback\\ApiComponentsBundle\\Entity\\Core\\AbstractComponent;\nuse Silverback\\ApiComponentsBundle\\Entity\\Utility\\PublishableTrait;\nuse Symfony\\Component\\Validator\\Constraints as Assert;\n\n#[Silverback\\Publishable]\n#[ApiResource(mercure: true)]\n#[ORM\\Entity]\nclass Title extends AbstractComponent\n{\n    use PublishableTrait;\n\n    #[Assert\\NotBlank(groups: ['Title:published'])]\n    #[ORM\\Column(type: 'text', nullable: true)]\n    public ?string $title = null;\n}\n","php","",[381,408,409,422,429,451,456,478,504,528,555,582,611,616,633,656,669,685,691,702,707,746,787,813],{"__ignoreMap":406},[410,411,414,418],"span",{"class":412,"line":413},"line",1,[410,415,417],{"class":416},"sVlFx","\u003C?",[410,419,421],{"class":420},"sc2zw","php\n",[410,423,425],{"class":412,"line":424},2,[410,426,428],{"emptyLinePlaceholder":427},true,"\n",[410,430,432,436,440,444,447],{"class":412,"line":431},3,[410,433,435],{"class":434},"stmX-","namespace",[410,437,439],{"class":438},"sRCss"," App",[410,441,443],{"class":442},"sn4go","\\",[410,445,446],{"class":438},"Entity",[410,448,450],{"class":449},"sOvfz",";\n",[410,452,454],{"class":412,"line":453},4,[410,455,428],{"emptyLinePlaceholder":427},[410,457,459,462,465,468,471,473,476],{"class":412,"line":458},5,[410,460,461],{"class":434},"use",[410,463,464],{"class":420}," ApiPlatform",[410,466,443],{"class":467},"sBtbT",[410,469,470],{"class":420},"Metadata",[410,472,443],{"class":467},[410,474,475],{"class":420},"ApiResource",[410,477,450],{"class":449},[410,479,481,483,486,488,491,493,496,499,502],{"class":412,"line":480},6,[410,482,461],{"class":434},[410,484,485],{"class":420}," Doctrine",[410,487,443],{"class":467},[410,489,490],{"class":420},"ORM",[410,492,443],{"class":467},[410,494,495],{"class":420},"Mapping",[410,497,498],{"class":434}," as",[410,500,501],{"class":438}," ORM",[410,503,450],{"class":449},[410,505,507,509,512,514,517,519,522,524,526],{"class":412,"line":506},7,[410,508,461],{"class":434},[410,510,511],{"class":420}," Silverback",[410,513,443],{"class":467},[410,515,516],{"class":420},"ApiComponentsBundle",[410,518,443],{"class":467},[410,520,521],{"class":420},"Annotation",[410,523,498],{"class":434},[410,525,511],{"class":438},[410,527,450],{"class":449},[410,529,531,533,535,537,539,541,543,545,548,550,553],{"class":412,"line":530},8,[410,532,461],{"class":434},[410,534,511],{"class":420},[410,536,443],{"class":467},[410,538,516],{"class":420},[410,540,443],{"class":467},[410,542,446],{"class":420},[410,544,443],{"class":467},[410,546,547],{"class":420},"Core",[410,549,443],{"class":467},[410,551,552],{"class":420},"AbstractComponent",[410,554,450],{"class":449},[410,556,558,560,562,564,566,568,570,572,575,577,580],{"class":412,"line":557},9,[410,559,461],{"class":434},[410,561,511],{"class":420},[410,563,443],{"class":467},[410,565,516],{"class":420},[410,567,443],{"class":467},[410,569,446],{"class":420},[410,571,443],{"class":467},[410,573,574],{"class":420},"Utility",[410,576,443],{"class":467},[410,578,579],{"class":420},"PublishableTrait",[410,581,450],{"class":449},[410,583,585,587,590,592,594,596,599,601,604,606,609],{"class":412,"line":584},10,[410,586,461],{"class":434},[410,588,589],{"class":420}," Symfony",[410,591,443],{"class":467},[410,593,213],{"class":420},[410,595,443],{"class":467},[410,597,598],{"class":420},"Validator",[410,600,443],{"class":467},[410,602,603],{"class":420},"Constraints",[410,605,498],{"class":434},[410,607,608],{"class":438}," Assert",[410,610,450],{"class":449},[410,612,614],{"class":412,"line":613},11,[410,615,428],{"emptyLinePlaceholder":427},[410,617,619,623,626,628,630],{"class":412,"line":618},12,[410,620,622],{"class":621},"sPB8G","#[",[410,624,625],{"class":420},"Silverback",[410,627,443],{"class":467},[410,629,92],{"class":420},[410,631,632],{"class":621},"]\n",[410,634,636,638,640,643,646,648,651,654],{"class":412,"line":635},13,[410,637,622],{"class":621},[410,639,475],{"class":420},[410,641,642],{"class":449},"(",[410,644,645],{"class":438},"mercure",[410,647,399],{"class":449},[410,649,650],{"class":467}," true",[410,652,653],{"class":449},")",[410,655,632],{"class":621},[410,657,659,661,663,665,667],{"class":412,"line":658},14,[410,660,622],{"class":621},[410,662,490],{"class":420},[410,664,443],{"class":467},[410,666,446],{"class":420},[410,668,632],{"class":621},[410,670,672,676,679,682],{"class":412,"line":671},15,[410,673,675],{"class":674},"swB56","class",[410,677,678],{"class":438}," Title",[410,680,681],{"class":674}," extends",[410,683,684],{"class":438}," AbstractComponent\n",[410,686,688],{"class":412,"line":687},16,[410,689,690],{"class":449},"{\n",[410,692,694,697,700],{"class":412,"line":693},17,[410,695,696],{"class":434},"    use",[410,698,699],{"class":420}," PublishableTrait",[410,701,450],{"class":449},[410,703,705],{"class":412,"line":704},18,[410,706,428],{"emptyLinePlaceholder":427},[410,708,710,713,716,718,721,723,726,728,731,735,739,741,744],{"class":412,"line":709},19,[410,711,712],{"class":621},"    #[",[410,714,715],{"class":420},"Assert",[410,717,443],{"class":467},[410,719,720],{"class":420},"NotBlank",[410,722,642],{"class":449},[410,724,725],{"class":438},"groups",[410,727,399],{"class":449},[410,729,730],{"class":449}," [",[410,732,734],{"class":733},"seSrl","'",[410,736,738],{"class":737},"sLL54","Title:published",[410,740,734],{"class":733},[410,742,743],{"class":449},"])",[410,745,632],{"class":621},[410,747,749,751,753,755,758,760,763,765,768,771,773,776,779,781,783,785],{"class":412,"line":748},20,[410,750,712],{"class":621},[410,752,490],{"class":420},[410,754,443],{"class":467},[410,756,757],{"class":420},"Column",[410,759,642],{"class":449},[410,761,762],{"class":438},"type",[410,764,399],{"class":449},[410,766,767],{"class":733}," '",[410,769,770],{"class":737},"text",[410,772,734],{"class":733},[410,774,775],{"class":449},",",[410,777,778],{"class":438}," nullable",[410,780,399],{"class":449},[410,782,650],{"class":467},[410,784,653],{"class":449},[410,786,632],{"class":621},[410,788,790,793,796,799,802,805,808,811],{"class":412,"line":789},21,[410,791,792],{"class":674},"    public",[410,794,795],{"class":416}," ?",[410,797,798],{"class":434},"string",[410,800,801],{"class":449}," $",[410,803,804],{"class":621},"title ",[410,806,807],{"class":416},"=",[410,809,810],{"class":467}," null",[410,812,450],{"class":449},[410,814,816],{"class":412,"line":815},22,[410,817,818],{"class":449},"}\n",[351,820,821],{},"What each part does:",[823,824,825,834,843,849,855],"ul",{},[358,826,827,829,830,833],{},[381,828,552],{}," — gives it an IRI, UUID, ",[381,831,832],{},"uiComponent"," field, and ComponentGroup support",[358,835,836,839,840,842],{},[381,837,838],{},"#[Silverback\\Publishable]"," + ",[381,841,579],{}," — draft\u002Fpublish workflow",[358,844,845,848],{},[381,846,847],{},"#[ApiResource(mercure: true)]"," — creates REST endpoints and broadcasts real-time updates on change",[358,850,851,854],{},[381,852,853],{},"#[ORM\\Entity]"," — Doctrine entity (needs a database table)",[358,856,857,860],{},[381,858,859],{},"Assert\\NotBlank(groups: ['Title:published'])"," — only required when publishing, not when saving a draft",[351,862,863],{},"Run the migration:",[401,865,869],{"className":866,"code":867,"language":868,"meta":406,"style":406},"language-bash shiki shiki-themes github-light github-dark material-theme-palenight","bin\u002Fconsole doctrine:migrations:diff\nbin\u002Fconsole doctrine:migrations:migrate\n","bash",[381,870,871,879],{"__ignoreMap":406},[410,872,873,876],{"class":412,"line":413},[410,874,875],{"class":438},"bin\u002Fconsole",[410,877,878],{"class":737}," doctrine:migrations:diff\n",[410,880,881,883],{"class":412,"line":424},[410,882,875],{"class":438},[410,884,885],{"class":737}," doctrine:migrations:migrate\n",[386,887],{},[389,889,891],{"id":890},"step-2-the-vue-display-component","Step 2: The Vue Display Component",[351,893,395,894,399],{},[381,895,896],{},"app\u002Fcwa\u002Fcomponents\u002FTitle\u002FTitle.vue",[401,898,902],{"className":899,"code":900,"language":901,"meta":406,"style":406},"language-vue shiki shiki-themes github-light github-dark material-theme-palenight","\u003Ctemplate>\n  \u003Ch1 class=\"text-4xl font-bold\">\n    {{ resource?.data?.title || 'No Title' }}\n  \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>()\n\nconst { getResource, exposeMeta } = useCwaResource(toRef(props, 'iri'))\nconst resource = getResource()\n\ndefineExpose(exposeMeta)\n\u003C\u002Fscript>\n","vue",[381,903,904,916,940,945,954,963,967,991,1016,1039,1059,1063,1089,1093,1133,1146,1150,1158],{"__ignoreMap":406},[410,905,906,909,913],{"class":412,"line":413},[410,907,908],{"class":449},"\u003C",[410,910,912],{"class":911},"s-h7I","template",[410,914,915],{"class":449},">\n",[410,917,918,921,924,928,930,933,936,938],{"class":412,"line":424},[410,919,920],{"class":449},"  \u003C",[410,922,923],{"class":911},"h1",[410,925,927],{"class":926},"sGtlX"," class",[410,929,807],{"class":449},[410,931,932],{"class":733},"\"",[410,934,935],{"class":737},"text-4xl font-bold",[410,937,932],{"class":733},[410,939,915],{"class":449},[410,941,942],{"class":412,"line":431},[410,943,944],{"class":621},"    {{ resource?.data?.title || 'No Title' }}\n",[410,946,947,950,952],{"class":412,"line":453},[410,948,949],{"class":449},"  \u003C\u002F",[410,951,923],{"class":911},[410,953,915],{"class":449},[410,955,956,959,961],{"class":412,"line":458},[410,957,958],{"class":449},"\u003C\u002F",[410,960,912],{"class":911},[410,962,915],{"class":449},[410,964,965],{"class":412,"line":480},[410,966,428],{"emptyLinePlaceholder":427},[410,968,969,971,974,977,980,982,984,987,989],{"class":412,"line":506},[410,970,908],{"class":449},[410,972,973],{"class":911},"script",[410,975,976],{"class":926}," setup",[410,978,979],{"class":926}," lang",[410,981,807],{"class":449},[410,983,932],{"class":733},[410,985,986],{"class":737},"ts",[410,988,932],{"class":733},[410,990,915],{"class":449},[410,992,993,997,1000,1003,1006,1009,1011,1013],{"class":412,"line":530},[410,994,996],{"class":995},"sm4w6","import",[410,998,999],{"class":449}," {",[410,1001,1002],{"class":621}," toRef",[410,1004,1005],{"class":449}," }",[410,1007,1008],{"class":995}," from",[410,1010,767],{"class":733},[410,1012,901],{"class":737},[410,1014,1015],{"class":733},"'\n",[410,1017,1018,1020,1023,1025,1028,1030,1032,1034,1037],{"class":412,"line":557},[410,1019,996],{"class":995},[410,1021,1022],{"class":995}," type",[410,1024,999],{"class":449},[410,1026,1027],{"class":621}," IriProp",[410,1029,1005],{"class":449},[410,1031,1008],{"class":995},[410,1033,767],{"class":733},[410,1035,1036],{"class":737},"#cwa\u002Fcomposables\u002Fcwa-resource",[410,1038,1015],{"class":733},[410,1040,1041,1043,1045,1048,1050,1052,1054,1057],{"class":412,"line":584},[410,1042,996],{"class":995},[410,1044,999],{"class":449},[410,1046,1047],{"class":621}," useCwaResource",[410,1049,1005],{"class":449},[410,1051,1008],{"class":995},[410,1053,767],{"class":733},[410,1055,1056],{"class":737},"#imports",[410,1058,1015],{"class":733},[410,1060,1061],{"class":412,"line":613},[410,1062,428],{"emptyLinePlaceholder":427},[410,1064,1065,1068,1071,1074,1078,1080,1083,1086],{"class":412,"line":618},[410,1066,1067],{"class":674},"const",[410,1069,1070],{"class":420}," props",[410,1072,1073],{"class":416}," =",[410,1075,1077],{"class":1076},"sKpYG"," defineProps",[410,1079,908],{"class":449},[410,1081,1082],{"class":438},"IriProp",[410,1084,1085],{"class":449},">",[410,1087,1088],{"class":621},"()\n",[410,1090,1091],{"class":412,"line":635},[410,1092,428],{"emptyLinePlaceholder":427},[410,1094,1095,1097,1099,1102,1104,1107,1109,1111,1113,1115,1118,1121,1123,1125,1128,1130],{"class":412,"line":658},[410,1096,1067],{"class":674},[410,1098,999],{"class":449},[410,1100,1101],{"class":420}," getResource",[410,1103,775],{"class":449},[410,1105,1106],{"class":420}," exposeMeta",[410,1108,1005],{"class":449},[410,1110,1073],{"class":416},[410,1112,1047],{"class":1076},[410,1114,642],{"class":621},[410,1116,1117],{"class":1076},"toRef",[410,1119,1120],{"class":621},"(props",[410,1122,775],{"class":449},[410,1124,767],{"class":733},[410,1126,1127],{"class":737},"iri",[410,1129,734],{"class":733},[410,1131,1132],{"class":621},"))\n",[410,1134,1135,1137,1140,1142,1144],{"class":412,"line":671},[410,1136,1067],{"class":674},[410,1138,1139],{"class":420}," resource",[410,1141,1073],{"class":416},[410,1143,1101],{"class":1076},[410,1145,1088],{"class":621},[410,1147,1148],{"class":412,"line":687},[410,1149,428],{"emptyLinePlaceholder":427},[410,1151,1152,1155],{"class":412,"line":693},[410,1153,1154],{"class":1076},"defineExpose",[410,1156,1157],{"class":621},"(exposeMeta)\n",[410,1159,1160,1162,1164],{"class":412,"line":704},[410,1161,958],{"class":449},[410,1163,973],{"class":911},[410,1165,915],{"class":449},[1167,1168,1170],"h3",{"id":1169},"the-required-pattern-explained","The required pattern explained",[351,1172,1173,1178,1179,1181],{},[361,1174,1175],{},[381,1176,1177],{},"defineProps\u003CIriProp>()"," — every display component receives an ",[381,1180,1127],{}," prop. The module passes this when it renders the component.",[351,1183,1184,1189,1190,1193,1194,1197,1198,1201],{},[361,1185,1186],{},[381,1187,1188],{},"useCwaResource(toRef(props, 'iri'))"," — subscribes to the resource at that IRI. Returns ",[381,1191,1192],{},"getResource"," (a function that returns a ",[381,1195,1196],{},"Ref\u003CResource>",") and ",[381,1199,1200],{},"exposeMeta"," (metadata the admin panel needs).",[351,1203,1204,1209,1210,1213,1214,1217],{},[361,1205,1206],{},[381,1207,1208],{},"const resource = getResource()"," — the resource ref. It's ",[381,1211,1212],{},"undefined"," while loading, ",[381,1215,1216],{},"null"," if not found, and an object when ready.",[351,1219,1220,1225,1226,1229],{},[361,1221,1222],{},[381,1223,1224],{},"defineExpose(exposeMeta)"," — ",[361,1227,1228],{},"required",". Without this the admin manager panel can't find and select this component. Never omit it.",[351,1231,1232,1237,1238,1241,1242,1245],{},[361,1233,1234],{},[381,1235,1236],{},"resource?.data?.title"," — access your fields on ",[381,1239,1240],{},"resource.value.data",". The ",[381,1243,1244],{},"?."," guards against the loading state.",[386,1247],{},[389,1249,1251],{"id":1250},"step-3-the-admin-tab","Step 3: The Admin Tab",[351,1253,395,1254,399],{},[381,1255,1256],{},"app\u002Fcwa\u002Fcomponents\u002FTitle\u002Fadmin\u002FTitle.vue",[401,1258,1260],{"className":899,"code":1259,"language":901,"meta":406,"style":406},"\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')\n\ndefineExpose(exposeMeta)\n\u003C\u002Fscript>\n",[381,1261,1262,1270,1290,1313,1321,1329,1333,1353,1377,1381,1422,1454,1458,1464],{"__ignoreMap":406},[410,1263,1264,1266,1268],{"class":412,"line":413},[410,1265,908],{"class":449},[410,1267,912],{"class":911},[410,1269,915],{"class":449},[410,1271,1272,1274,1277,1280,1282,1284,1286,1288],{"class":412,"line":424},[410,1273,920],{"class":449},[410,1275,1276],{"class":911},"CwaUiFormLabelWrapper",[410,1278,1279],{"class":926}," label",[410,1281,807],{"class":449},[410,1283,932],{"class":733},[410,1285,383],{"class":737},[410,1287,932],{"class":733},[410,1289,915],{"class":449},[410,1291,1292,1295,1298,1301,1303,1305,1308,1310],{"class":412,"line":431},[410,1293,1294],{"class":449},"    \u003C",[410,1296,1297],{"class":911},"CwaUiFormInput",[410,1299,1300],{"class":926}," v-model",[410,1302,807],{"class":449},[410,1304,932],{"class":733},[410,1306,1307],{"class":737},"titleModel.model.value",[410,1309,932],{"class":733},[410,1311,1312],{"class":449}," \u002F>\n",[410,1314,1315,1317,1319],{"class":412,"line":453},[410,1316,949],{"class":449},[410,1318,1276],{"class":911},[410,1320,915],{"class":449},[410,1322,1323,1325,1327],{"class":412,"line":458},[410,1324,958],{"class":449},[410,1326,912],{"class":911},[410,1328,915],{"class":449},[410,1330,1331],{"class":412,"line":480},[410,1332,428],{"emptyLinePlaceholder":427},[410,1334,1335,1337,1339,1341,1343,1345,1347,1349,1351],{"class":412,"line":506},[410,1336,908],{"class":449},[410,1338,973],{"class":911},[410,1340,976],{"class":926},[410,1342,979],{"class":926},[410,1344,807],{"class":449},[410,1346,932],{"class":733},[410,1348,986],{"class":737},[410,1350,932],{"class":733},[410,1352,915],{"class":449},[410,1354,1355,1357,1359,1362,1364,1367,1369,1371,1373,1375],{"class":412,"line":530},[410,1356,996],{"class":995},[410,1358,999],{"class":449},[410,1360,1361],{"class":621}," useCwaResourceManagerTab",[410,1363,775],{"class":449},[410,1365,1366],{"class":621}," useCwaResourceModel",[410,1368,1005],{"class":449},[410,1370,1008],{"class":995},[410,1372,767],{"class":733},[410,1374,1056],{"class":737},[410,1376,1015],{"class":733},[410,1378,1379],{"class":412,"line":557},[410,1380,428],{"emptyLinePlaceholder":427},[410,1382,1383,1385,1387,1389,1391,1394,1396,1398,1400,1402,1405,1409,1411,1413,1415,1417,1419],{"class":412,"line":584},[410,1384,1067],{"class":674},[410,1386,999],{"class":449},[410,1388,1106],{"class":420},[410,1390,775],{"class":449},[410,1392,1393],{"class":420}," iri",[410,1395,1005],{"class":449},[410,1397,1073],{"class":416},[410,1399,1361],{"class":1076},[410,1401,642],{"class":621},[410,1403,1404],{"class":449},"{",[410,1406,1408],{"class":1407},"sDHlG"," name",[410,1410,399],{"class":449},[410,1412,767],{"class":733},[410,1414,383],{"class":737},[410,1416,734],{"class":733},[410,1418,1005],{"class":449},[410,1420,1421],{"class":621},")\n",[410,1423,1424,1426,1429,1431,1433,1435,1438,1440,1443,1445,1447,1450,1452],{"class":412,"line":613},[410,1425,1067],{"class":674},[410,1427,1428],{"class":420}," titleModel",[410,1430,1073],{"class":416},[410,1432,1366],{"class":1076},[410,1434,908],{"class":449},[410,1436,798],{"class":1437},"sbW4m",[410,1439,1085],{"class":449},[410,1441,1442],{"class":621},"(iri",[410,1444,775],{"class":449},[410,1446,767],{"class":733},[410,1448,1449],{"class":737},"title",[410,1451,734],{"class":733},[410,1453,1421],{"class":621},[410,1455,1456],{"class":412,"line":618},[410,1457,428],{"emptyLinePlaceholder":427},[410,1459,1460,1462],{"class":412,"line":635},[410,1461,1154],{"class":1076},[410,1463,1157],{"class":621},[410,1465,1466,1468,1470],{"class":412,"line":658},[410,1467,958],{"class":449},[410,1469,973],{"class":911},[410,1471,915],{"class":449},[1167,1473,1475],{"id":1474},"how-this-works","How this works",[351,1477,1478,1483,1484,1487,1488,1491,1492,1494],{},[361,1479,1480],{},[381,1481,1482],{},"useCwaResourceManagerTab({ name: 'Title' })"," — registers this file as a tab in the manager panel. The tab label is ",[381,1485,1486],{},"'Title'",". Returns ",[381,1489,1490],{},"{ exposeMeta, iri }"," where ",[381,1493,1127],{}," is a ref to the selected component's IRI.",[351,1496,1497,1502,1503,1505,1506,1508,1509,1512],{},[361,1498,1499],{},[381,1500,1501],{},"useCwaResourceModel\u003Cstring>(iri, 'title')"," — creates a two-way binding to the ",[381,1504,1449],{}," field. Setting ",[381,1507,1307],{}," automatically sends a debounced PATCH to the API. The ",[381,1510,1511],{},"\u003Cstring>"," type parameter is optional but helps with TypeScript.",[351,1514,1515,1520],{},[361,1516,1517],{},[381,1518,1519],{},"v-model=\"titleModel.model.value\""," — binds the input directly. As the admin types, the API is updated automatically.",[351,1522,1523,1527],{},[361,1524,1525],{},[381,1526,1224],{}," — also required in admin tabs.",[386,1529],{},[389,1531,1533],{"id":1532},"step-4-register-in-nuxtconfig","Step 4: Register in nuxt.config",[401,1535,1538],{"className":1536,"code":1537,"language":986,"meta":406,"style":406},"language-ts shiki shiki-themes github-light github-dark material-theme-palenight","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  cwa: {\n    resources: {\n      Title: {\n        name: 'Title',\n        description: 'A heading or section title',\n        instantAdd: false,\n        defaultData: {\n          title: 'New Title'\n        }\n      }\n    }\n  }\n})\n",[381,1539,1540,1546,1561,1571,1580,1589,1605,1621,1634,1643,1657,1662,1667,1672,1677],{"__ignoreMap":406},[410,1541,1542],{"class":412,"line":413},[410,1543,1545],{"class":1544},"sTBSN","\u002F\u002F nuxt.config.ts\n",[410,1547,1548,1551,1554,1557,1559],{"class":412,"line":424},[410,1549,1550],{"class":995},"export",[410,1552,1553],{"class":995}," default",[410,1555,1556],{"class":1076}," defineNuxtConfig",[410,1558,642],{"class":621},[410,1560,690],{"class":449},[410,1562,1563,1566,1568],{"class":412,"line":431},[410,1564,1565],{"class":1407},"  cwa",[410,1567,399],{"class":449},[410,1569,1570],{"class":449}," {\n",[410,1572,1573,1576,1578],{"class":412,"line":453},[410,1574,1575],{"class":1407},"    resources",[410,1577,399],{"class":449},[410,1579,1570],{"class":449},[410,1581,1582,1585,1587],{"class":412,"line":458},[410,1583,1584],{"class":1407},"      Title",[410,1586,399],{"class":449},[410,1588,1570],{"class":449},[410,1590,1591,1594,1596,1598,1600,1602],{"class":412,"line":480},[410,1592,1593],{"class":1407},"        name",[410,1595,399],{"class":449},[410,1597,767],{"class":733},[410,1599,383],{"class":737},[410,1601,734],{"class":733},[410,1603,1604],{"class":449},",\n",[410,1606,1607,1610,1612,1614,1617,1619],{"class":412,"line":506},[410,1608,1609],{"class":1407},"        description",[410,1611,399],{"class":449},[410,1613,767],{"class":733},[410,1615,1616],{"class":737},"A heading or section title",[410,1618,734],{"class":733},[410,1620,1604],{"class":449},[410,1622,1623,1626,1628,1632],{"class":412,"line":530},[410,1624,1625],{"class":1407},"        instantAdd",[410,1627,399],{"class":449},[410,1629,1631],{"class":1630},"swWMF"," false",[410,1633,1604],{"class":449},[410,1635,1636,1639,1641],{"class":412,"line":557},[410,1637,1638],{"class":1407},"        defaultData",[410,1640,399],{"class":449},[410,1642,1570],{"class":449},[410,1644,1645,1648,1650,1652,1655],{"class":412,"line":584},[410,1646,1647],{"class":1407},"          title",[410,1649,399],{"class":449},[410,1651,767],{"class":733},[410,1653,1654],{"class":737},"New Title",[410,1656,1015],{"class":733},[410,1658,1659],{"class":412,"line":613},[410,1660,1661],{"class":449},"        }\n",[410,1663,1664],{"class":412,"line":618},[410,1665,1666],{"class":449},"      }\n",[410,1668,1669],{"class":412,"line":635},[410,1670,1671],{"class":449},"    }\n",[410,1673,1674],{"class":412,"line":658},[410,1675,1676],{"class":449},"  }\n",[410,1678,1679,1682],{"class":412,"line":671},[410,1680,1681],{"class":449},"}",[410,1683,1421],{"class":621},[351,1685,1686],{},"Without this the component still works, but it won't appear with a name and description in the \"Add Component\" dialog.",[386,1688],{},[389,1690,1692],{"id":1691},"step-5-try-it","Step 5: Try It",[355,1694,1695,1701,1704,1711,1717,1720,1725,1728],{},[358,1696,1697,1698,653],{},"Open your local site in edit mode (log in as admin, click ",[361,1699,1700],{},"Edit",[358,1702,1703],{},"Navigate to a page with an editable component group",[358,1705,1706,1707,1710],{},"Click the ",[361,1708,1709],{},"+"," hotspot at the top or bottom of the group",[358,1712,1713,1714,1716],{},"Find ",[361,1715,383],{}," in the dialog and add it",[358,1718,1719],{},"Click the component — the manager panel appears at the bottom",[358,1721,1706,1722,1724],{},[361,1723,383],{}," tab and type something",[358,1726,1727],{},"The heading updates live as you type",[358,1729,1730,1731,1734],{},"Click ",[361,1732,1733],{},"Publish"," to make it live for all visitors",[386,1736],{},[389,1738,1740],{"id":1739},"file-structure-summary","File Structure Summary",[1742,1743],"diagram-file-tree",{":files":1744,"root":1745},"[{\"path\":\"Title\u002FTitle.vue\",\"label\":\"display component\"},{\"path\":\"Title\u002Fadmin\u002FTitle.vue\",\"label\":\"admin editing tab\",\"variant\":\"blue\"}]","app\u002Fcwa\u002Fcomponents\u002F",[386,1747],{},[389,1749,1751],{"id":1750},"multiple-admin-tabs","Multiple Admin Tabs",[351,1753,1754,1755,1758],{},"A component can have multiple admin tabs. Just create multiple files in the ",[381,1756,1757],{},"admin\u002F"," directory:",[1742,1760],{":files":1761},"[{\"path\":\"admin\u002FContent.vue\",\"label\":\"useCwaResourceManagerTab({ name: 'Content', order: 1 })\",\"variant\":\"blue\"},{\"path\":\"admin\u002FSettings.vue\",\"label\":\"useCwaResourceManagerTab({ name: 'Settings', order: 2 })\",\"variant\":\"blue\"}]",[351,1763,1764,1765,1768],{},"Each file is its own tab. Use the ",[381,1766,1767],{},"order"," option to control which appears first.",[386,1770],{},[389,1772,1774],{"id":1773},"next-steps","Next Steps",[823,1776,1777,1784,1790],{},[358,1778,1779,1780],{},"Add an image to your component → ",[1781,1782,1783],"a",{"href":286},"Images & Media Guide",[358,1785,1786,1787],{},"Add style variants → ",[1781,1788,1789],{"href":33},"Alternative UI Variants Guide",[358,1791,1792],{},"Add rich text editing → HTML Content Guide (coming soon)",[1794,1795,1796],"style",{},"html pre.shiki code .sVlFx, html code.shiki .sVlFx{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#89DDFF}html pre.shiki code .sc2zw, html code.shiki .sc2zw{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#BABED8}html pre.shiki code .stmX-, html code.shiki .stmX-{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#F78C6C}html pre.shiki code .sRCss, html code.shiki .sRCss{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#FFCB6B}html pre.shiki code .sn4go, html code.shiki .sn4go{--shiki-light:#6F42C1;--shiki-default:#B392F0;--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 .sBtbT, html code.shiki .sBtbT{--shiki-light:#005CC5;--shiki-default:#79B8FF;--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 .swB56, html code.shiki .swB56{--shiki-light:#D73A49;--shiki-default:#F97583;--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 .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 .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 .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}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 .swWMF, html code.shiki .swWMF{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#FF9CAC}",{"title":406,"searchDepth":424,"depth":424,"links":1798},[1799,1800,1803,1806,1807,1808,1809,1810],{"id":391,"depth":424,"text":392},{"id":890,"depth":424,"text":891,"children":1801},[1802],{"id":1169,"depth":431,"text":1170},{"id":1250,"depth":424,"text":1251,"children":1804},[1805],{"id":1474,"depth":431,"text":1475},{"id":1532,"depth":424,"text":1533},{"id":1691,"depth":424,"text":1692},{"id":1739,"depth":424,"text":1740},{"id":1750,"depth":424,"text":1751},{"id":1773,"depth":424,"text":1774},"Build a complete CWA component from scratch — the PHP entity, the Vue display template, and the admin editing tab.","md",null,{},{"title":28,"description":1811},"tRg5Kf_sxHxSEwd6pxqkKZIslQbhbcWzQu8p0gzOT9I",[1818,1820],{"title":24,"path":25,"stem":26,"description":1819,"children":-1},"Create a page template that defines the content regions within a layout using CwaComponentGroup.",{"title":32,"path":33,"stem":34,"description":1821,"children":-1},"Give the same component multiple visual styles — using style class names for CSS variation or ui\u002F Vue files for fully different templates.",1782241278654]