Incorporate an external script into your Vue.js application

Seeking to integrate a simple JavaScript script with an external link to the library into my Vue.js application, I have encountered the following:

<script type="text/javascript" src="https://my_site/index.js"></script>
 <link rel="stylesheet" href="https://my_site/index.css" />

 <script type="text/javascript">
     document.addEventListener('DOMContentLoaded', function () {
         new Pbx(
             {
                 "key1": 'value1',
                 "key2": 'value2'
             },
             {
                 'config': 'configValue'
             }
         );
     });
 </script>

While I possess the main.js file for my application, I am striving to preserve the external nature of my script:

    import Vue from 'vue';
    import VModal from 'vue-js-modal';
    import App from './App.vue';
    import router from './router';
    import store from './store';
    import i18n from './i18n';
    import VueScrollactive from 'vue-scrollactive';
    import VTooltip from 'v-tooltip';

    import './styles/index.scss';

    export default new Vue({
      el: '#myApp',
      store,
      router,
      i18n,
      render: h => h(App),
    });

Inquiring about the best method to include my library, I've attempted integrating my JavaScript here but remain unsatisfied.

Many thanks,

Answer №1

My experience with using jQuery without npm installation involved placing the <script> tag of jQuery above the script tag of the build files within the generated html file. This allowed me to access the $ variable of jQuery in my app.

To access a specific variable, I created a separate .js file where I defined it like so: let pbx = new Pbx(data). By ensuring the correct placement of script tags, the pbx data was accessible throughout the app.

However, it's worth noting that using

document.addEventListener('DOMContentLoaded')
might cause conflict with vue. To address this issue, you can access the pbx variable in the mounted life cycle of the App component for immediate access.

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

Are extra parameters in the URL causing issues with AngularJS routing?

When I receive password reset instructions in my app, the URL I use to go to the server looks like this: /changepass?key=1231231231212312 In the controller, I have the following code: if (typeof $routeParams.key !== 'undefined') { $scope ...

What is the process of establishing a connection to a web service using Meteor or Node.js?

Currently working on developing a package that interfaces with a web service (either through nodejs or meteor). The web service will be delivering real-time data, so I am in need of a mechanism like a listener or trigger event that can alert me when new da ...

Generate a div element dynamically when an option is selected using AngularJS

I'm having trouble dynamically creating div elements based on the selected option value, but for some reason ng-repeat isn't working as expected. Can you help me figure out what I'm missing? Here's the HTML snippet I'm using - &l ...

There is a problem with my module where multiple files that require it are overriding its variables

Currently, I am working on developing a mongo connection pool factory that is capable of checking if a connection to mongo already exists. If a connection exists, it will return that connection. However, if there is no existing connection, it will create a ...

Effective ways to check for the time discrepancy between dates in moment.js

My server is set to use UTC date format and I am running my node server in UTC as well. I am looking to determine if the current time in Indian timezone (which is +5.30) is greater than 8AM, and if so, send an email notification. How can I achieve this u ...

"Unlocking the Power of Social Interaction with Vue.js

I've successfully integrated a Facebook Login module in my project and it's working well. However, I'm facing difficulties when trying to link the response data with an input field. Can someone guide me on how to achieve this? I'm still ...

Using an array of references in React

I've encountered a problem where I'm trying to create a ref array from one component and then pass it to another inner component. However, simply passing them as props to the inner component doesn't work as it returns null. I attempted to fo ...

Is there a way to extract subtitles from a javascript-controlled webpage using Python?

I am attempting to scrape information from this website: Link to Website Specifically, I am trying to extract the title ''Friday Night Lights'', but I am encountering difficulties accessing it due to JavaScript on the site. To achieve ...

Restrict certain links from being clickable until the page has finished loading and all click events have been bound using

I developed a modal dialog plugin using jquery, designed to link to the click event of each <a> element with a specific class. This modal dialog uses AJAX to 'fetch' a page declared under the 'href' parameter of the <a> el ...

Identifying instances where the AJAX success function exceeds a 5-second duration and automatically redirecting

Greetings! I have created a script that allows for seamless page transitions using Ajax without reloading the page. While the script functions perfectly, I am seeking to implement a feature that redirects to the requested page if the Ajax request takes lo ...

"Can someone provide guidance on extracting the ID from a JSON value and storing it in a

Hey there, I have come across this jQuery code snippet: var fbuid = zuck; var fbjson = $.getJSON("https://graph.facebook.com/"+fbuid); I am wondering how to extract the id directly from the JSON response into a variable : { id: "4", first_name: "Mark", ...

Mastering the Art of Trimming with Jquery

function DisplayDataForEdit(id) { $("#editContainer").slideDown("medium"); var parentId ='item'+ id; var colIndex = 0; var $row = $("#" + parentId).parent().parent(); $row.find('td').each(f ...

Downloading files from a Blob in NodeJS: A step-by-step guide

How do I retrieve a file from a BLOB column using NodeJS? Currently, I am utilizing the oracledb library for database operations and my code snippet is as follows: async function getFile(req, res) { let filename = req.params.filename; let file = a ...

Populate an HTML table using a JavaScript array containing objects

Greetings, fellow coders! I am new to the coding world and this community, and despite my efforts in searching for a solution, I couldn't find exactly what I was looking for. So, here is my question: I have an array structured as follows: const arr ...

Identify the moment all Dropzones are added to a form

I am working on a page where multiple dropzones are set up for individual images. Once the user submits the form, all the images attached to the dropzones are resized and then added to the rest of the form fields. After resizing and appending the images, ...

Setting up CSS module class names in a Vue project using Vite js configuration

Within my vite.config.ts file, I have specified a configuration for CSS modules. return defineConfig({ ... css: { ... modules: { localsConvention: "camelCase", generateScopedName: "[name]__[local]__[hash:base64:2]" ...

Error VM5601:2 encountered - Unexpected token "<" found in JSON at position 10

I am trying to retrieve data using Ajax and jQuery, but I keep encountering an error that I cannot figure out how to fix. VM5601:2 Uncaught SyntaxError: Unexpected token < in JSON at position 10 Below is the code I am working with. Model public f ...

Can HTML text areas be designed to adjust their width automatically, as well as their height?

Among the numerous StackOverflow examples showcasing an auto-height Textarea, one noteworthy example can be found here: <textarea oninput="auto_grow(this)"></textarea> textarea { resize: none; overflow: hidden; min-heig ...

Using Element UI to assign an id to a table column that includes a checkbox

Is there a way to assign an ID to el-table-column with the selection type? I attempted to use a slot for this purpose, but it caused the checkbox not to render. Below is the code snippet: <el-table-column> <template slot-scope="scope" v-if=" ...

Steps to troubleshoot the TypeError: cv.Mat is not a constructor in opencv.js issue

Encountering a problem while trying to use opencv.js for detecting aruco markers from my camera. Each time I attempt to utilize the method let image = new cv.imread('img'); An error keeps popping up: TypeError: cv.Mat is not a constructor ...