Integrating Vue JS Components with Websight

[Harikarthyk]

Hey! 👋
We attempted to integrate WebSight with Vue.

So, in the page folder under the resources, we created the Vue app instance with primevue (for styling) in the body.html.

So the Vue components are rendering. But when we edit the Vue components after clicking submit button in the Edit dialog box the Vue instance or the javascript that is responsible for Vue components, it is not rendering. But I see my changes coming as a response from rootcontainer.html. I believe the Vue thing is not persisting after an edit submission, but we can see the changes after a refresh.

Is there any way or idea to implement Javascript (Vue) in WebSight so that the Vue thing remains after editing?

[paweljozwicki]

HI!
Can I ask you to provide some more details? Maybe you can share some screenshots and code samples to ensure we will recreate your issue?

[Harikarthyk]

1. So in the page folder.
   body-content.html is under the div tag which has the id "app", which is basically the Vue component mounted.

2. So in the head.libs, all the Vue, and prime Vue Cdn links are added.

3. So in the cta.html (which is basically the component that is created similar to howlite). in this p-button tag is used which is defined in the body-end.html. (please check the 4th screenshot for the same.)

4. In the body-end.html, where the Vue instance is added.

[Shivam-apna]

@paweljozwicki You can also suggest us a better way to integrate prime-vue and vue in websight as I I didn't find any specific thing in documentation.

[Harikarthyk]

Initially, things are working as expected.

After editing this component, Vue JS is not loaded. I tried with a normal button tag with CSS, and it is working, but I am facing issues when I use vue components.

After refreshing got the required output.

[paweljozwicki]

Thanks for all the details.
We have already found the reason for your problems. After saving changes in the dialog, the page editor reloads the page content, but it is done by changing the main container HTML instead of reloading the whole page. That's why the button label is changed, but the Vue app is not re-rendered.

Now we are discussing some possible solutions. We will try to recreate your environment and provide something.

[michalcukierman]

Maybe, after the dialog submission, we could give the option to trigger iframe reload like with:
document.getElementsByTagName('iframe')[0].contentWindow.location.reload();
instead of reloading the document node only?

SPA frameworks like React, Angular, Vue do not play well with direct DOM manipulations.
Reloading the whole iframe may result in a screen blink, but it may be the simplest and robust solution, that should work for all SPA frameworks without any custom code.

[Harikarthyk]

@michalcukierman Okay, thanks. I could not figure out any function related to that submit button in the dialog. Where can we find that or add the custom function for the "Submit" button in the Edit dialogue box?

[michalcukierman]

@paweljozwicki is it possible at the moment?

[paweljozwicki]

I'll start with some explanation after investigating the problem.
As @michalcukierman mentioned SPA frameworks do not play well with direct DOM manipulations and the problem occurs not only on submitting dialog changes, but also adding and removing components. Each of those actions uses EditModeStore from websight-pages-editor-view to manipulate DOM, but it's not prepared to support custom actions. Now we are working on changes for Page Editor to support adding custom plugins, but until then I think it won't be possible to do something with that.

We were not yet focusing on supporting SPAs. I'm still looking for some solution, but I'm afraid it won't work well without waiting for changes in WebSight CMS.

[paweljozwicki]

Hi, just to summarise:
we will deliver some solutions that should help with your issue.


First of all, we will provide a possibility to define if component changes should re-render the whole iframe. In the case of SPA, all the components would have to use this mechanism, but it should help you because refreshing the iframe would rebuild the whole Vue app.



We will also provide a possibility to extend Page Editor with custom actions, but for now, I won’t share any details, because we have to design it first.

[Harikarthyk]

Hi, @paweljozwicki

Any updates on this?

[paweljozwicki]

Hi, we have it implemented, but not been documented yet.

What you have to do to extend the page editor is to add a new WebFragment:

package pl.ds.howlite;

import org.osgi.service.component.annotations.Component;
import pl.ds.websight.fragments.registry.WebFragment;

@Component
public class RefreshVueStateExtension implements WebFragment {

  @Override
  public String getKey() {
    return "websight.editor.spi.extension";
  }

  @Override
  public String getFragment() {
    return "/libs/howlite/author/editor/extensions/RefreshVueStateExtension.js";
  }

  @Override
  public int getRanking() {
    return 200;
  }
}

And it should point to the js file that does iframe refreshing.

export default {
  init: (editor) => {
    editor.addEventListener('component-dom-updated', () => {
      editor.componentTree.get().parentDocument.location.reload();
    });
  }
}

To use WebFragment you will have to add this dependency to your project:

<dependency>
    <groupId>pl.ds.websight</groupId>
    <artifactId>websight-fragments-registry</artifactId>
    <version>1.0.3</version>
    <scope>provided</scope>
</dependency>

More details should be available soon in the documentation, but I hope it will help you meanwhile.

[paweljozwicki]

Hi, here is the documentation explaining the solution I sent earlier.

[Harikarthyk]

Ok, thanks for sharing.

We will incorporate them into ours and update you.