Experience Manager with Headless CMS using VueJs is not working

Hello,
we are using bloomreach headless in version 14.3.1 and the spa-sdk with vueJs.
We are using the enterprise version.

We want to integrate the experience Manager, like it works in the developer trial, but neither the overlay is visible nor do any edit-content buttons get rendered.

Our configuration actually looks like this:
initialize({
endpoint: this.apiBaseUrl,
httpClient: this.axios,
request: { path }
}

Help is appreciated.
What is the minimal configuration or meta-comment information one would need to get the experience Manager working in the cms?

greetings
Norman Rehbein

Hello Norman,

I see you mention that you are using the enterprise version so I guess you have already taken care of either converting the project to an enterprise via essentials or following manual steps. - if down the line on the investigation checking preview page model endpoints the response doesn’t include meta comments return to this step and verify correct enterprise convertion.

What is the initialize method around the configuration object? Is it the initialize of the SPA SDK?
I would advice to simply pass the configuration and mapping objects to the br-page component as it will handle the invocation of the SPA SDK initialize.

The configuration object structure seems correct though I can’t know the values of this.apiBaseUrl and path.
When you open your SPA monitor the network tab in your browser and observe what kind of requests are being made by the SDK. Is it accessing the correct endpoint in brXM? This will give you a hint on the validity of your configuration.

When you open the channel in the Experience Manager for preview again observe in the network tab that the internals calls get redirected to your SPA and that the SDK invokes some page model API endpoint with an Authorization header in place. Try to open the same call in a separate tab and check the page model structure if it contains beginNodeSpan and endNodeSpan properties in the meta section of components.

Inspect also the outputed markup of your SPA inside the Experience Manager end check if your components are wrapped in meta comments.

See also our documentation sources that describe the editing integration and troubleshooting.

HTH and kind regards,
Lef

1 Like

Thanks for the quick reply.
We could already fix the experience manager, it worked after we switched to the vueJs sdk for bloomreach.

But, actually, when we edit and save documents via the edit-content-button in the overlay, the page reloads and the visual’s are gone.

It seems the reload happens without the jwt-token, therefore we don’t get the meta data.
How can we intercept this reload or control it ourselves?

I would like the documentation here:

To have some more examples.