Unlocking the Potential of External JavaScript Functions and Objects in Vue.js

I'm facing an issue with adding external JavaScript (using CDN) and accessing its methods.

I attempted to add it in the mounted hook, but I'm not confident if this is the best approach:

mounted() {
let leafMap = document.createElement("script");
leafMap.setAttribute(
  "src",
  "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93fff6f2f5fff6e7d3a2bda4bda2">[email protected]</a>/dist/leaflet.js"
);
document.head.appendChild(leafMap);
}

I can access it from Vue methods using:

window.L //window.<packageName>

However, when the page is created, window.L is undefined. So, I need to wait for the script to load. What would be the best way to manage this process?

javascriptvue.jsvuejs2javascript-objects

Answer №1

Prior to the mounted hook, the created hook is executed, meaning that when you include the script, window.L will not be available at that point.

The script would have already been executed by the time the load event occurs, allowing you to create a load-event handler in which you can utilize window.L:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

an issue encountered while trying to print a webpage styled with CSS

Users are given the option to print the current page on the website by clicking on a menu element: <li> <a href="#" onClick="window.print()"> <i class="icon-print"></i> Print Page </a> </li> The page contai ...

javascripthtmlcss

The Facebook debugging tool is unable to detect meta tags for SEO in Next.js

This question feels all too familiar, as if it has been asked numerous times before. It must be a challenging one. Let me add some more detail from my end to see if it sheds light on the issue. Currently, I am working with Next.js ^10.0.9 and next-seo ^4. ...

javascriptreactjsseonext.jsserver-side-rendering

What could be causing the href to malfunction on my local website?

I'm currently working on adding a new link that directs to a local HTML website within a menu list on a website. The main website is in ASPX format, but my focus is on the HTML version. The link I want to add leads to an HTML website stored on my loca ...

javascriptasp.nethtmlpermissions

What is the proper way to include a URL when submitting an AJAX form?

When I try to call a servlet using HTML, jQuery and Ajax by submitting a form, I keep getting a 404 error saying the resource cannot be found. My project is built with Maven. The Servlet is located in the src/main/java package under : com.mycompany.sample ...

javajavascriptjqueryhtmlajax

I am encountering an issue where pagination is not functioning correctly while applying filters. Can anyone suggest a

I am currently experiencing an issue with my datatable. The result and pagination function correctly, however, when I apply a filter, the pagination does not adjust accordingly. This seems to be a common problem on this type of page.https://i.sstatic.net/p ...

javascriptreactjs

Instructions for filtering content by manually entering numbers and utilizing Angular 2

Having trouble filtering table contents with multiple fields? Let's take a look at the code: https://i.sstatic.net/jfLbz.png HTML: Here is the code snippet for filtering data: <ng-select [options]="name" [(ngModel)]="filter.name"></ng-selec ...

javascriptangulartypescript

Updating an iframe's content URL

I am currently working on building a website using Google Web Design and everything is going well so far. I have added an iFrame to the site and now I am trying to figure out how to change its source when a button is pressed. Most of the information I fo ...

javascripthtmliframe

What steps are involved in integrating Bootstrap and jQuery into a Vue Webpack-Simple template?

I am trying to integrate Bootstrap 3 into my Vue app. Here is what I have done so far: vue init webpack-simple npm install jquery bootstrap After this, I added the following to webpack.config.js: module.exports = { ... plugins: [ new webpa ...

jquerytwitter-bootstrapwebpackvue.jsvue-cli

To ensure that quotes are correctly handled in a string being passed to a JavaScript function within an `onclick`

I am facing an issue with a cycle in a jspx file that I have. The cycle looks like this: <c:forEach var="var" items="${dataFile.list.rows}"> <li> <div> <a href="#" onClick="myFunct('${var.url}','escape(${var ...

javascriptjspquotes

Exploring the Possibilities: Opening a New Modal Dialog from Within an Existing One Using Jquery Bootstrap

I am facing an issue with a modal dialog that contains a form for users to sign in. If the user has not registered yet, there is a link within the modal dialog to open another modal dialog with a registration form inside. This setup is causing conflict a ...

javascriptjqueryajaxtwitter-bootstrapdialog

I'm getting an error on the console saying that the activator slot needs to be bound, even though I have already bound it. What could

I am trying to showcase this content as a dialog box within another page. The code snippet can be found on https://www.youtube.com/watch?v=J4fIObUYiHw&list=PL4cUxeGkcC9g0MQZfHwKcuB0Yswgb3gA5&index=23. While it works for the creator, I am encounte ...

vue.jsvuetify.js

What is the proper way to declare static references in the Composition API with Typescript?

Currently, I am using the Composition API (with <script setup lang='ts'>) to create a ref that is utilized in my template: const searchRef = ref(null) onMounted(() => { searchRef.value.focus() }) Although it works and my code compiles w ...

typescriptvue.jsreferencevuejs3vue-composition-api

The duplication of the Javascript code is creating a conflict within the slider functionality

Attempting to create both an image slider and text slider on the same page using the same JavaScript is proving to be a challenge. Despite researching and trying to implement a no-conflict solution, the sliders still do not function properly together. Wh ...

javascriptjquery

Having trouble with retrieving JSONP data? Unsure how to access the information?

Why do I keep getting a -403 error? https://i.stack.imgur.com/T53O9.png However, when I click on the link, I see this: https://i.stack.imgur.com/8GiMo.png How can I retrieve the message? ...

javascriptvue.js

The notification bar only makes an appearance when necessary

I am currently working on a dynamic piece of code that sends a request to PHP and receives a response. The goal is for the notification bar to fadeIn() and fadeOut() every time there is a new notification. However, I have encountered an issue where the n ...

javascriptphpjqueryajax

Trouble with Slides.js jQuery plugin loading properly on Chrome and Safari, works perfectly on Firefox

I have implemented a slideshow plugin from on my website: . The issue I am facing is with its compatibility in different browsers. When viewed in Firefox, the slideshow functions perfectly as expected. However, in Chrome or Safari, the slideshow fails to ...

javascriptjquerypluginsslideshow

Whenever the download bar emerges at the bottom, the slideshow content on the page suddenly shifts upwards

Each time the download bar shows up at the bottom, the slideshow content on the Homepage suddenly moves up. It returns to its original position after I close the download bar.https://photos.app.goo.gl/F482eMfkXyfEZkdA9. My assumption is that this issue is ...

javascripthtmlcss

Upon the completion of the Vue component, all subsequent elements are automatically removed

If you take a look at this website along with its source code, you'll notice an issue. Removing the cdn for the vue-tag-input component causes everything to render except the component itself. However, adding the cdn back results in nothing being disp ...

javascriptnode.jsvue.js

What is the best way to eliminate duplicate data from a JSON file?

In the code snippet below, there is a function that queries and retrieves data from a getjson. The issue at hand is how to filter out repeated results so that they do not appear. Is there a way to prevent duplicate data from being displayed? var cuit ...

javascriptjqueryjson

Top method for integrating configuration into a module

I'm trying to create a module called something.js that depends on a configuration, but I don't want the module itself to explicitly require the config. Additionally, I need my code editor to be able to analyze the module and provide autocomplete ...

javascriptnode.jsmodulerequire