Как в Nuxt/Vue вставить внешний JS с рендором в блок?

Question

[Николай]

Добрый день, сообщество. Нужна твоя помощь!

Итак, есть внешний виджет, подключаемый на обычный сайт следующим кодом:

// Где-то в одном месте
<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>

В результате в блок `#sp-7O1Ya5yaBAGp` вставляется iframe с внешним кодом.

Но как сделать вставку в страницу Nuxt?
Внешний скрипт в Nuxt можно подключить так:

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

Но как заставить выполниться остальной код, отвечающий за рендер, я не понимаю :( Пробовал разные варианты через mounted, но что-то и близко не получилось.

Answer 1

[Aetae]

Должно работать самым очевидным образом:

<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>

Если что-то не работает, смотрите в консоль или давайте настоящую ссылку на "https://superproject.com/sp.js".

Comments

[Николай]

Ха, действительно всё работает! Спасибо. Клянусь, я вчера так пробовал, но что-то пошло не так.