CODEWITHSUNDEEP
javascriptvue.jsvuejs2javascript-objects
Muzaffer Kadir Yılmaz
Muzaffer Kadir Yılmaz

Reputation: 888

How to reach external js's methods or objects in Vuejs

I want to add external js (with cdn) but i cant reach methods.

I added to mounted hook like (i don't think it is the best practice):

mounted() {
let leafMap = document.createElement("script");
leafMap.setAttribute(
  "src",
  "https://unpkg.com/[email protected]/dist/leaflet.js"
);
document.head.appendChild(leafMap);
}

I can reach from vue methods like:

window.L //window.<packageName>

But window.L is undefined when page created. So i should wait script to load. How can i handle the process?

Upvotes: 1

Views: 40

Answers (1)

tony19
tony19

Reputation: 138276

The created hook occurs before the mounted hook, where you've added the script, so window.L wouldn't be available there.

The script will have already run upon the load event, so you could add a load-event handler where you could use window.L:

let leafMap = document.createElement("script");
leafMap.setAttribute(/*...*/);
leafMap.addEventListener("load", () => {
  console.log("L", window.L);
});
document.head.appendChild(leafMap);

Upvotes: 1

Related Questions