Flourish embed chart on nuxt.js app

[shidcordero]

So I am trying to add flourish using embed as discuss here (https://developers.flourish.studio/embedding/introduction/) and it only works if I refresh(F5) the page. When I route(by clicking a url to go to that page with flourish embed), it does not gets embedded (no iframe added). Not sure why. I am targeting static with ssr on nuxt 2.0.

[gistlens]

I'm finding that even calling Flourish.loadEmbed on an applicable element won't work after the first time. ie:

• Route to a page in a SPA and call Flourish.loadEmbed on an element -> this works
• Route to another page and call Flourish.loadEmbed on another element -> does not load

It seems like something in the flourish embed script is being flagged as 'processed' and won't re-load. Is there any way to reset that? ie, any way to destroy Flourish to remove it completely from memory in the browser so that it will work again when routing to another page (and avoid memory leaks...)?

[gistlens]

From reading the embed.js script (https://public.flourish.studio/resources/embed.js) I've figured out that you can 'reset' it by setting:

window.FlourishLoaded = null

It will now successfully load charts when navigating to new routes, however I suspect it introduces a memory leak with this approach. An officially supported method to destroy (tear down all event listeners and clean up everything in the global scope on the window object) would be very helpful for anyone using this in a SPA.

[GoreStarry]

Thank You~😭 You Save My Life😭

[christopherbowers]

Saved my life as well!

[etczrn]

@gistlens Thank you. You are a lifesaver. And those who are looking for solution using SvelteKit, here is how I sovle the problem.

  onDestroy(() => {
    if (browser) {
      delete window.FlourishConfig;
      delete window.FlourishLoaded;
    }
  });

Don't forget to add types to global window object.

declare global {
  interface Window {
      FlourishConfig?: {
      app_url: string;
      embeds_url: string;
      public_url: string;
    } | null;
    FlourishLoaded?: boolean | null;
  }
}