[{"data":1,"prerenderedAt":765},["ShallowReactive",2],{"navigation":3,"\u002Fnuxt-module\u002Fcomponent-helpers\u002Freal-time-updates":342,"\u002Fnuxt-module\u002Fcomponent-helpers\u002Freal-time-updates-surround":760},[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":297,"badge":344,"body":347,"description":754,"extension":755,"links":756,"meta":757,"navigation":525,"path":298,"seo":758,"stem":299,"__hash__":759},"docs\u002F5.nuxt-module\u002F7.component-helpers\u002F4.real-time-updates.md",{"label":345,"color":346},"Draft","amber",{"type":348,"value":349,"toc":743},"minimark",[350,354,359,386,394,398,403,413,482,485,489,500,503,556,566,570,577,580,603,607,610,613,617,622,645,650,662,667,691,695,698,705,726,739],[351,352,353],"p",{},"CWA is live by default. When an admin publishes a component, every open browser session receives the update via the Mercure hub — no page reload, no polling, no WebSocket code on your end.",[355,356,358],"h2",{"id":357},"how-it-works","How It Works",[360,361,362,366,374,377,380,383],"ol",{},[363,364,365],"li",{},"An admin publishes a component via the CMS",[363,367,368,369,373],{},"The Symfony API sends an update to the Mercure hub (because ",[370,371,372],"code",{},"mercure: true"," is on the entity)",[363,375,376],{},"The hub broadcasts the update to all subscribed browser connections",[363,378,379],{},"The Nuxt module's resource store receives the event and updates the relevant IRI",[363,381,382],{},"Vue's reactivity re-renders any component bound to that resource",[363,384,385],{},"A non-intrusive notification toasts for regular visitors (\"Content updated\")",[351,387,388,389,393],{},"You write ",[390,391,392],"strong",{},"none"," of this plumbing. It's in the module.",[355,395,397],{"id":396},"prerequisites","Prerequisites",[399,400,402],"h3",{"id":401},"php-side","PHP Side",[351,404,405,406,408,409,412],{},"Add ",[370,407,372],{}," to the ",[370,410,411],{},"#[ApiResource]"," attribute on any entity you want to broadcast:",[414,415,420],"pre",{"className":416,"code":417,"language":418,"meta":419,"style":419},"language-php shiki shiki-themes github-light github-dark material-theme-palenight","#[ApiResource(mercure: true)]\nclass Title extends AbstractComponent { ... }\n","php","",[370,421,422,456],{"__ignoreMap":419},[423,424,427,431,435,439,443,446,450,453],"span",{"class":425,"line":426},"line",1,[423,428,430],{"class":429},"sPB8G","#[",[423,432,434],{"class":433},"sc2zw","ApiResource",[423,436,438],{"class":437},"sOvfz","(",[423,440,442],{"class":441},"sRCss","mercure",[423,444,445],{"class":437},":",[423,447,449],{"class":448},"sBtbT"," true",[423,451,452],{"class":437},")",[423,454,455],{"class":429},"]\n",[423,457,459,463,466,469,472,475,479],{"class":425,"line":458},2,[423,460,462],{"class":461},"swB56","class",[423,464,465],{"class":441}," Title",[423,467,468],{"class":461}," extends",[423,470,471],{"class":441}," AbstractComponent",[423,473,474],{"class":437}," {",[423,476,478],{"class":477},"sVlFx"," ...",[423,480,481],{"class":437}," }\n",[351,483,484],{},"Without this, the resource updates silently (the API saves the change, but no Mercure event fires).",[399,486,488],{"id":487},"infrastructure","Infrastructure",[351,490,491,492,499],{},"You need a Mercure hub running alongside your API. The Docker Compose template includes one via ",[493,494,498],"a",{"href":495,"rel":496},"https:\u002F\u002Fmercure.rocks\u002F",[497],"nofollow","dunglas\u002Fmercure",".",[351,501,502],{},"Required environment variables:",[414,504,508],{"className":505,"code":506,"language":507,"meta":419,"style":419},"language-ini shiki shiki-themes github-light github-dark material-theme-palenight","# API → hub (internal, server-side)\nMERCURE_URL=http:\u002F\u002Fmercure\u002F.well-known\u002Fmercure\n\n# Browser → hub (public-facing)\nMERCURE_PUBLIC_URL=https:\u002F\u002Fmercure.example.com\u002F.well-known\u002Fmercure\n\n# Shared secret for publisher JWT (keep private)\nMERCURE_JWT_SECRET=your_secure_secret\n","ini",[370,509,510,515,520,527,533,539,544,550],{"__ignoreMap":419},[423,511,512],{"class":425,"line":426},[423,513,514],{},"# API → hub (internal, server-side)\n",[423,516,517],{"class":425,"line":458},[423,518,519],{},"MERCURE_URL=http:\u002F\u002Fmercure\u002F.well-known\u002Fmercure\n",[423,521,523],{"class":425,"line":522},3,[423,524,526],{"emptyLinePlaceholder":525},true,"\n",[423,528,530],{"class":425,"line":529},4,[423,531,532],{},"# Browser → hub (public-facing)\n",[423,534,536],{"class":425,"line":535},5,[423,537,538],{},"MERCURE_PUBLIC_URL=https:\u002F\u002Fmercure.example.com\u002F.well-known\u002Fmercure\n",[423,540,542],{"class":425,"line":541},6,[423,543,526],{"emptyLinePlaceholder":525},[423,545,547],{"class":425,"line":546},7,[423,548,549],{},"# Shared secret for publisher JWT (keep private)\n",[423,551,553],{"class":425,"line":552},8,[423,554,555],{},"MERCURE_JWT_SECRET=your_secure_secret\n",[351,557,558,561,562,565],{},[370,559,560],{},"MERCURE_URL"," and ",[370,563,564],{},"MERCURE_PUBLIC_URL"," can be the same in simple deployments (e.g. a single server where your API and hub are on the same host). They differ in Docker Compose setups where the API uses an internal hostname.",[355,567,569],{"id":568},"no-front-end-code-needed","No Front-End Code Needed",[351,571,572,573,576],{},"The module subscribes to the Mercure hub in its Nuxt plugin. Topics are derived automatically from the IRIs of resources that have been fetched for the current page. You never write ",[370,574,575],{},"EventSource"," or WebSocket code.",[351,578,579],{},"The subscription lifecycle:",[581,582,583,591,597,600],"ul",{},[363,584,585,586,588,589],{},"On page load: the module opens an ",[370,587,575],{}," connection to ",[370,590,564],{},[363,592,593,594],{},"Topics: all IRIs currently in ",[370,595,596],{},"cwa.resources.currentIds",[363,598,599],{},"On navigation: the subscription updates to the new page's resource IRIs",[363,601,602],{},"On sign-in: Mercure re-initialises to include private topics (admin resources)",[355,604,606],{"id":605},"the-visitor-notification","The Visitor Notification",[351,608,609],{},"When a Mercure update arrives for a non-admin visitor, a toast notification appears: \"Content on this page has been updated.\" The visitor can dismiss it. Whether they dismiss it or not, the resource store has already updated — new content is in the DOM.",[351,611,612],{},"Admins editing in real time see their changes immediately without any notification.",[355,614,616],{"id":615},"troubleshooting","Troubleshooting",[351,618,619],{},[390,620,621],{},"No live updates arriving in the browser:",[360,623,624,630,636,642],{},[363,625,626,627,629],{},"Check that ",[370,628,564],{}," is reachable from browsers — not an internal Docker hostname",[363,631,632,633,635],{},"Confirm ",[370,634,372],{}," is on the PHP entity",[363,637,638,639,641],{},"Open DevTools → Network → Filter by ",[370,640,575],{}," — you should see a persistent connection to the hub",[363,643,644],{},"Check the hub logs for authentication errors",[351,646,647],{},[390,648,649],{},"Hub 401 errors:",[581,651,652,659],{},[363,653,654,655,658],{},"The ",[370,656,657],{},"MERCURE_JWT_SECRET"," must match exactly between the API (publisher) and the hub (subscriber)",[363,660,661],{},"Verify the secret is identically set in both services",[351,663,664],{},[390,665,666],{},"Updates arrive but the component doesn't re-render:",[581,668,669,680],{},[363,670,671,672,675,676,679],{},"Confirm the component uses ",[370,673,674],{},"useCwaResource"," or ",[370,677,678],{},"useCwaImageResource"," — both react to store updates",[363,681,682,683,686,687,690],{},"Bare ",[370,684,685],{},"$fetch"," calls are not reactive; use ",[370,688,689],{},"cwa.resources.getResource(iri)"," for reactive lookups",[355,692,694],{"id":693},"advanced-custom-topics","Advanced: Custom Topics",[351,696,697],{},"By default CWA subscribes only to the exact IRIs of resources fetched for the current page. The module does not subscribe to wildcard or collection topics automatically.",[351,699,700,701,704],{},"To subscribe to additional topics (e.g. a ",[370,702,703],{},"{+https:\u002F\u002Fexample.com\u002Fcomponent\u002Fproducts}"," wildcard that covers all products), you need two things:",[360,706,707,713],{},[363,708,709,712],{},[390,710,711],{},"Hub side"," — your Mercure hub must be configured to allow that topic pattern for subscriber tokens.",[363,714,715,718,719,721,722,725],{},[390,716,717],{},"Module side"," — open a second ",[370,720,575],{}," in a Nuxt plugin or composable that passes the extra topics in the ",[370,723,724],{},"topic"," query parameter.",[351,727,728,729,731,732,735,736,738],{},"There is no built-in CWA API for registering custom topics today. This is an advanced use case best solved by adding a Nuxt plugin that opens a secondary ",[370,730,575],{}," connection alongside the one the module manages. The module's resource store is reactive — once a resource IRI updates in the store (via ",[370,733,734],{},"$cwa.resources.setResource(iri, data)",") any component bound to that IRI will re-render, regardless of which ",[370,737,575],{}," delivered the update.",[740,741,742],"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 .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 .sBtbT, html code.shiki .sBtbT{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#89DDFF}html pre.shiki code .swB56, html code.shiki .swB56{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#C792EA}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);}",{"title":419,"searchDepth":458,"depth":458,"links":744},[745,746,750,751,752,753],{"id":357,"depth":458,"text":358},{"id":396,"depth":458,"text":397,"children":747},[748,749],{"id":401,"depth":522,"text":402},{"id":487,"depth":522,"text":488},{"id":568,"depth":458,"text":569},{"id":605,"depth":458,"text":606},{"id":615,"depth":458,"text":616},{"id":693,"depth":458,"text":694},"How Mercure broadcasts live content changes to all open browser sessions automatically when a component is published.","md",null,{},{"title":297,"description":754},"Wo2wj0ftKl0ueLkt21OjE8VJq2NVevGxfG2A7qtxDUs",[761,763],{"title":293,"path":294,"stem":295,"description":762,"children":-1},"Render rich-text HTML from a CWA resource with CwaLink replacing anchor tags so internal links stay client-side.",{"title":301,"path":302,"stem":303,"description":764,"children":-1},"Build form components for Symfony Form types using CWA's form composables — covering every field type with Nuxt UI examples.",1782241282037]