[{"data":1,"prerenderedAt":1054},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Fyour-first-component":358,"\u002Fguides\u002Fyour-first-component-surround":1049},[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":28,"badge":360,"body":363,"description":1043,"extension":1044,"links":1045,"meta":1046,"navigation":658,"path":29,"seo":1047,"stem":30,"__hash__":1048},"docs\u002F2.guides\u002F3.your-first-component.md",{"label":361,"color":362},"Draft","amber",{"type":364,"value":365,"toc":1035},"minimark",[366,371,375,401,412,415,489,499,502,506,509,532,535,558,567,569,573,580,834,836,840,974,976,980,995,997,1001,1031],[367,368,370],"h2",{"id":369},"step-1-scaffold-the-vue-component","Step 1: Scaffold the Vue component",[372,373,374],"p",{},"In your Nuxt project, run the interactive generator:",[376,377,382],"pre",{"className":378,"code":379,"language":380,"meta":381,"style":381},"language-bash shiki shiki-themes github-light github-dark material-theme-palenight","npx cwa make:component\n","bash","",[383,384,385],"code",{"__ignoreMap":381},[386,387,390,394,398],"span",{"class":388,"line":389},"line",1,[386,391,393],{"class":392},"sRCss","npx",[386,395,397],{"class":396},"sLL54"," cwa",[386,399,400],{"class":396}," make:component\n",[372,402,403,404,407,408,411],{},"It prompts for the component name, type, and which API behaviours you need. Once complete it writes ",[383,405,406],{},"app\u002Fcwa\u002Fcomponents\u002FTitle\u002FTitle.vue"," and outputs the ",[383,409,410],{},"php bin\u002Fconsole"," command to run in your API project.",[372,413,414],{},"Open the generated file and fill in your template:",[376,416,420],{"className":417,"code":418,"language":419,"meta":381,"style":381},"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","vue",[383,421,422,435,462,469,479],{"__ignoreMap":381},[386,423,424,428,432],{"class":388,"line":389},[386,425,427],{"class":426},"sOvfz","\u003C",[386,429,431],{"class":430},"s-h7I","template",[386,433,434],{"class":426},">\n",[386,436,438,441,444,448,451,455,458,460],{"class":388,"line":437},2,[386,439,440],{"class":426},"  \u003C",[386,442,443],{"class":430},"h1",[386,445,447],{"class":446},"sGtlX"," class",[386,449,450],{"class":426},"=",[386,452,454],{"class":453},"seSrl","\"",[386,456,457],{"class":396},"text-4xl font-bold",[386,459,454],{"class":453},[386,461,434],{"class":426},[386,463,465],{"class":388,"line":464},3,[386,466,468],{"class":467},"sPB8G","    {{ resource?.data?.title || 'No Title' }}\n",[386,470,472,475,477],{"class":388,"line":471},4,[386,473,474],{"class":426},"  \u003C\u002F",[386,476,443],{"class":430},[386,478,434],{"class":426},[386,480,482,485,487],{"class":388,"line":481},5,[386,483,484],{"class":426},"\u003C\u002F",[386,486,431],{"class":430},[386,488,434],{"class":426},[372,490,491,492,498],{},"See ",[493,494,495],"a",{"href":180},[383,496,497],{},"cwa make:component"," for the full reference and the image\u002Fcollection variants.",[500,501],"hr",{},[367,503,505],{"id":504},"step-2-create-the-api-entity","Step 2: Create the API entity",[372,507,508],{},"Run the command output by the CLI in your API project — for example:",[376,510,512],{"className":378,"code":511,"language":380,"meta":381,"style":381},"php bin\u002Fconsole make:api-component Title --publishable\n",[383,513,514],{"__ignoreMap":381},[386,515,516,519,522,525,528],{"class":388,"line":389},[386,517,518],{"class":392},"php",[386,520,521],{"class":396}," bin\u002Fconsole",[386,523,524],{"class":396}," make:api-component",[386,526,527],{"class":396}," Title",[386,529,531],{"class":530},"szhYu"," --publishable\n",[372,533,534],{},"Then run the migration:",[376,536,538],{"className":378,"code":537,"language":380,"meta":381,"style":381},"php bin\u002Fconsole doctrine:migrations:diff\nphp bin\u002Fconsole doctrine:migrations:migrate\n",[383,539,540,549],{"__ignoreMap":381},[386,541,542,544,546],{"class":388,"line":389},[386,543,518],{"class":392},[386,545,521],{"class":396},[386,547,548],{"class":396}," doctrine:migrations:diff\n",[386,550,551,553,555],{"class":388,"line":437},[386,552,518],{"class":392},[386,554,521],{"class":396},[386,556,557],{"class":396}," doctrine:migrations:migrate\n",[372,559,491,560,566],{},[493,561,563],{"href":562},"\u002Fapi\u002Fconsole-commands#make-api-component",[383,564,565],{},"make:api-component"," for all available flags.",[500,568],{},[367,570,572],{"id":571},"step-3-add-the-admin-tab","Step 3: Add the admin tab",[372,574,575,576,579],{},"Create ",[383,577,578],{},"app\u002Fcwa\u002Fcomponents\u002FTitle\u002Fadmin\u002FTitle.vue"," — the editing form shown in the inline CMS:",[376,581,583],{"className":417,"code":582,"language":419,"meta":381,"style":381},"\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",[383,584,585,593,614,637,645,653,660,685,719,724,776,811,816,825],{"__ignoreMap":381},[386,586,587,589,591],{"class":388,"line":389},[386,588,427],{"class":426},[386,590,431],{"class":430},[386,592,434],{"class":426},[386,594,595,597,600,603,605,607,610,612],{"class":388,"line":437},[386,596,440],{"class":426},[386,598,599],{"class":430},"CwaUiFormLabelWrapper",[386,601,602],{"class":446}," label",[386,604,450],{"class":426},[386,606,454],{"class":453},[386,608,609],{"class":396},"Title",[386,611,454],{"class":453},[386,613,434],{"class":426},[386,615,616,619,622,625,627,629,632,634],{"class":388,"line":464},[386,617,618],{"class":426},"    \u003C",[386,620,621],{"class":430},"CwaUiFormInput",[386,623,624],{"class":446}," v-model",[386,626,450],{"class":426},[386,628,454],{"class":453},[386,630,631],{"class":396},"titleModel.model.value",[386,633,454],{"class":453},[386,635,636],{"class":426}," \u002F>\n",[386,638,639,641,643],{"class":388,"line":471},[386,640,474],{"class":426},[386,642,599],{"class":430},[386,644,434],{"class":426},[386,646,647,649,651],{"class":388,"line":481},[386,648,484],{"class":426},[386,650,431],{"class":430},[386,652,434],{"class":426},[386,654,656],{"class":388,"line":655},6,[386,657,659],{"emptyLinePlaceholder":658},true,"\n",[386,661,663,665,668,671,674,676,678,681,683],{"class":388,"line":662},7,[386,664,427],{"class":426},[386,666,667],{"class":430},"script",[386,669,670],{"class":446}," setup",[386,672,673],{"class":446}," lang",[386,675,450],{"class":426},[386,677,454],{"class":453},[386,679,680],{"class":396},"ts",[386,682,454],{"class":453},[386,684,434],{"class":426},[386,686,688,692,695,698,701,704,707,710,713,716],{"class":388,"line":687},8,[386,689,691],{"class":690},"sm4w6","import",[386,693,694],{"class":426}," {",[386,696,697],{"class":467}," useCwaResourceManagerTab",[386,699,700],{"class":426},",",[386,702,703],{"class":467}," useCwaResourceModel",[386,705,706],{"class":426}," }",[386,708,709],{"class":690}," from",[386,711,712],{"class":453}," '",[386,714,715],{"class":396},"#imports",[386,717,718],{"class":453},"'\n",[386,720,722],{"class":388,"line":721},9,[386,723,659],{"emptyLinePlaceholder":658},[386,725,727,731,733,737,739,742,744,748,751,754,757,761,764,766,768,771,773],{"class":388,"line":726},10,[386,728,730],{"class":729},"swB56","const",[386,732,694],{"class":426},[386,734,736],{"class":735},"sc2zw"," exposeMeta",[386,738,700],{"class":426},[386,740,741],{"class":735}," iri",[386,743,706],{"class":426},[386,745,747],{"class":746},"sVlFx"," =",[386,749,697],{"class":750},"sKpYG",[386,752,753],{"class":467},"(",[386,755,756],{"class":426},"{",[386,758,760],{"class":759},"sDHlG"," name",[386,762,763],{"class":426},":",[386,765,712],{"class":453},[386,767,609],{"class":396},[386,769,770],{"class":453},"'",[386,772,706],{"class":426},[386,774,775],{"class":467},")\n",[386,777,779,781,784,786,788,790,794,797,800,802,804,807,809],{"class":388,"line":778},11,[386,780,730],{"class":729},[386,782,783],{"class":735}," titleModel",[386,785,747],{"class":746},[386,787,703],{"class":750},[386,789,427],{"class":426},[386,791,793],{"class":792},"sbW4m","string",[386,795,796],{"class":426},">",[386,798,799],{"class":467},"(iri",[386,801,700],{"class":426},[386,803,712],{"class":453},[386,805,806],{"class":396},"title",[386,808,770],{"class":453},[386,810,775],{"class":467},[386,812,814],{"class":388,"line":813},12,[386,815,659],{"emptyLinePlaceholder":658},[386,817,819,822],{"class":388,"line":818},13,[386,820,821],{"class":750},"defineExpose",[386,823,824],{"class":467},"(exposeMeta)\n",[386,826,828,830,832],{"class":388,"line":827},14,[386,829,484],{"class":426},[386,831,667],{"class":430},[386,833,434],{"class":426},[500,835],{},[367,837,839],{"id":838},"step-4-register-in-nuxtconfig","Step 4: Register in nuxt.config",[376,841,844],{"className":842,"code":843,"language":680,"meta":381,"style":381},"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        defaultData: { title: 'New Title' }\n      }\n    }\n  }\n})\n",[383,845,846,852,868,878,887,896,912,928,952,957,962,967],{"__ignoreMap":381},[386,847,848],{"class":388,"line":389},[386,849,851],{"class":850},"sTBSN","\u002F\u002F nuxt.config.ts\n",[386,853,854,857,860,863,865],{"class":388,"line":437},[386,855,856],{"class":690},"export",[386,858,859],{"class":690}," default",[386,861,862],{"class":750}," defineNuxtConfig",[386,864,753],{"class":467},[386,866,867],{"class":426},"{\n",[386,869,870,873,875],{"class":388,"line":464},[386,871,872],{"class":759},"  cwa",[386,874,763],{"class":426},[386,876,877],{"class":426}," {\n",[386,879,880,883,885],{"class":388,"line":471},[386,881,882],{"class":759},"    resources",[386,884,763],{"class":426},[386,886,877],{"class":426},[386,888,889,892,894],{"class":388,"line":481},[386,890,891],{"class":759},"      Title",[386,893,763],{"class":426},[386,895,877],{"class":426},[386,897,898,901,903,905,907,909],{"class":388,"line":655},[386,899,900],{"class":759},"        name",[386,902,763],{"class":426},[386,904,712],{"class":453},[386,906,609],{"class":396},[386,908,770],{"class":453},[386,910,911],{"class":426},",\n",[386,913,914,917,919,921,924,926],{"class":388,"line":662},[386,915,916],{"class":759},"        description",[386,918,763],{"class":426},[386,920,712],{"class":453},[386,922,923],{"class":396},"A heading or section title",[386,925,770],{"class":453},[386,927,911],{"class":426},[386,929,930,933,935,937,940,942,944,947,949],{"class":388,"line":687},[386,931,932],{"class":759},"        defaultData",[386,934,763],{"class":426},[386,936,694],{"class":426},[386,938,939],{"class":759}," title",[386,941,763],{"class":426},[386,943,712],{"class":453},[386,945,946],{"class":396},"New Title",[386,948,770],{"class":453},[386,950,951],{"class":426}," }\n",[386,953,954],{"class":388,"line":721},[386,955,956],{"class":426},"      }\n",[386,958,959],{"class":388,"line":726},[386,960,961],{"class":426},"    }\n",[386,963,964],{"class":388,"line":778},[386,965,966],{"class":426},"  }\n",[386,968,969,972],{"class":388,"line":813},[386,970,971],{"class":426},"}",[386,973,775],{"class":467},[500,975],{},[367,977,979],{"id":978},"try-it","Try it",[372,981,982,983,987,988,990,991,994],{},"Log in as admin, open edit mode, click ",[984,985,986],"strong",{},"+"," in a component group, find ",[984,989,609],{},", add it, and type in the tab. Changes save automatically. Click ",[984,992,993],{},"Publish"," to make it live.",[500,996],{},[367,998,1000],{"id":999},"next-steps","Next Steps",[1002,1003,1004,1010,1015,1025],"ul",{},[1005,1006,1007,1008],"li",{},"Add an image → ",[493,1009,301],{"href":302},[1005,1011,1012,1013],{},"Style variants → ",[493,1014,32],{"href":33},[1005,1016,1017,1018,1021,1022],{},"Multiple admin tabs → create additional files in ",[383,1019,1020],{},"admin\u002F",", each with ",[383,1023,1024],{},"useCwaResourceManagerTab({ name: '...', order: N })",[1005,1026,1027,1028],{},"Full composable reference → ",[493,1029,1030],{"href":231},"useCwaComponent",[1032,1033,1034],"style",{},"html pre.shiki code .sRCss, html code.shiki .sRCss{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#FFCB6B}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 .sOvfz, html code.shiki .sOvfz{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#89DDFF}html pre.shiki code .s-h7I, html code.shiki .s-h7I{--shiki-light:#22863A;--shiki-default:#85E89D;--shiki-dark:#F07178}html pre.shiki code .sGtlX, html code.shiki .sGtlX{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#C792EA}html pre.shiki code .seSrl, html code.shiki .seSrl{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#89DDFF}html pre.shiki code .sPB8G, html code.shiki .sPB8G{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#BABED8}html pre.shiki code .szhYu, html code.shiki .szhYu{--shiki-light:#005CC5;--shiki-default:#79B8FF;--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 .swB56, html code.shiki .swB56{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#C792EA}html pre.shiki code .sc2zw, html code.shiki .sc2zw{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#BABED8}html pre.shiki code .sVlFx, html code.shiki .sVlFx{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#89DDFF}html pre.shiki code .sKpYG, html code.shiki .sKpYG{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#82AAFF}html 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}",{"title":381,"searchDepth":437,"depth":437,"links":1036},[1037,1038,1039,1040,1041,1042],{"id":369,"depth":437,"text":370},{"id":504,"depth":437,"text":505},{"id":571,"depth":437,"text":572},{"id":838,"depth":437,"text":839},{"id":978,"depth":437,"text":979},{"id":999,"depth":437,"text":1000},"Create a CWA component in four steps using the generator commands.","md",null,{},{"title":28,"description":1043},"0nDahRq3oJMANaDGOTTmaVPCgh1FQI3siS49fdY9B4k",[1050,1052],{"title":24,"path":25,"stem":26,"description":1051,"children":-1},"Create a page template that defines the content regions within a layout using CwaComponentGroup.",{"title":32,"path":33,"stem":34,"description":1053,"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.",1782512894926]