Hi Everyone
We have a Nuxt3 + SDK-Vue3 project
In our application, we use Nuxt as a microfrontend to render pages (then they are served by our BE). The Nuxt application receives a POST request from BE with a data model (JSON) from Bloomreach to render the ready view using sdk-vue (Nuxt). Rendering entire pages works fine, but we have trouble enpointing a single component (JSON model of a single component from Bloomreach) to render the view needed to be displayed in Experience Manager.
What should the JSON model for a single component look like for the Nuxt SDK to render the correct view to Experience Manager?
Hi @Przemek
To render a single component using the Nuxt3 + SDK-Vue3 setup in application, the JSON model for the component should follow a specific structure. Based on the context provided, here is an example of what the JSON model might look like:
{
"id": "component_id",
"links": {
"self": {
"href": "https://your-backend-endpoint/component-rendering?ref=component_id",
"type": "external"
}
},
"meta": {
"paramsInfo": {},
"params": {}
},
"name": "component_name",
"label": "Component Label",
"type": "container-item",
"ctype": "ComponentType",
"componentClass": "org.hippoecm.hst.component.support.bean.dynamic.BaseHstDynamicComponent",
"content": {
"$ref": "/page/content_id"
}
}
Please ensure that the href
in the links.self
object points to the correct endpoint in your backend that handles component rendering. The content
object should reference the actual content data needed for the component, which can be fetched using the $ref
value.
Thanks and Regards,
Rajesh S