How to insert external JS with render into a block in Nuxt/Vue?

Question

Vue.js

Good afternoon community. Need your help!

So, there is an external widget that is connected to a regular site with the following code:

// Где-то в одном месте
<script async type="text/javascript" src="https://superproject.com/sp.js"></script>

// Где-то в другом месте
<div id="sp-7O1Ya5yaBAGp"></div> // Блок куда происходит рендер
<script>
    (function(w, n) {
        w[n] = w[n] || [];
        w[n].push({
            spId: "7O1Ya5yaBAGp",
            blockId: "sp-7O1Ya5yaBAGp",
        });
    })(window, "superProjectRender");
</script>

As a result, an iframe with external code is inserted into the `#sp-7O1Ya5yaBAGp` block.

But how do you insert into a Nuxt page?
An external script in Nuxt can be connected like this:

export default {
  head: {
    script: [
      { src: 'https://superproject.com/sp.js' }
    ],
  }
}

But I don’t understand how to make the rest of the code responsible for rendering run :( I tried different options through mounted, but something didn’t work out close.

Answer 1

Should work in the most obvious way:

<template>
  <div>
    <div id="sp-7O1Ya5yaBAGp"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    (function(w, n) {
      w[n] = w[n] || [];
      w[n].push({
        spId: "7O1Ya5yaBAGp",
        blockId: "sp-7O1Ya5yaBAGp"
      });
    })(window, "superProjectRender");
  },
  head: {
    script: [
      {
        src: "https://superproject.com/sp.js"
      }
    ]
  }
};
</script>

If something doesn't work, look in the console or give a real link to " https://superproject.com/sp.js ".