Много разработчици, които открият Vue.js (независимо дали е 2.x или 3.x), се чудят как да импортират самостоятелен Js скрипт в своя компонент.

Например, това, от което се нуждаех за моя случай на употреба, беше да импортирам библиотеката от HubSpot и вътре в целевия ‹div› да имам ‹script› таг, който ще се изпълнява и изобразява външен вграден формуляр

Вътре в куката на жизнения цикъл mounted() първото нещо, което искаме да направим, е да създадем таг ‹script›, към който задаваме атрибута src към URI на lib, който след това добавяме като дете на тага ‹body› към уверете се, че е преди затварящия маркер (най-добра практика, освен ако не го асинхронизирате/отложите):

const hubspotEmbedScript = document.createElement('script');
hubspotEmbedScript.src = 'https://js-eu1.hsforms.net/forms/embed/v2.js';
hubspotEmbedScript.id = 'hubspot-embed-script';
document.body.appendChild(hubspotEmbedScript);

Тъй като Vue ще го добави динамично, след като DOM бъде монтиран, няма да имаме достъп до никакви променливи / обекти, създадени от него, преди да бъде зареден, така че трябва да изпълним останалата част от нашата логика, след като бъде заредена. Следователно във функцията за обратно извикване създаваме друг динамичен таг ‹script›, но този път той няма да има външен src, а ще има действителната логика, която ще изобрази формуляра за вграждане. Така че вместо да зададем src атрибут, ние ще зададем текстов атрибут, вътре в който ще напишем цялата си логика, и за да бъде интерпретиран безпроблемно, ние просто поставяме кода в шаблонни литерали (разделени с ` `).

След като напишем цялата логика, добавяме предварително създадения таг ‹script› към целевия div, вътре в който скриптът ще изобрази формуляра за вграждане.

hubspotEmbedScript.onload = () =>
  const hubspotFormScript =  document.createElement('script');
  hubspotFormScript.text = `
    // the hbspt variable is created by the previously imported lib, and won't be accessible before it was loaded
    hbspt.forms.create({
          // form parameters
      onFormReady: function($form) {
          // some logic when the form is ready andrendered
      },
      onFormSubmit: function() {
          // some logic after the embed form is submitted
      }
    });`;
  // needless to say that hubspotFormDiv is the targetted div inside which we will render the embed form.
  hubspotFormDiv.appendChild(hubspotFormScript);
};

Така че, ако имате подобен случай на употреба, това може да бъде (наред с много други без никакво съмнение) решение, което да приемете!

Разбира се, това може да не е най-доброто внедряване и аз съм абсолютно отворен за предложения за оптимизации или напълно различно внедряване.

Това е всичко, благодаря ви за четенето! :)