CODEWITHSUNDEEP
javascripthtmlvue.js
Vignesh Swaminathan
Vignesh Swaminathan

Reputation: 57

unable to add inline and external javascripts into vue js file?

I have html file which has 3 script tags. I want to put these script tags in my vue.js file

my html file


<html>
  <body>
    <script type="text/javascript">
      mxBasePath = "../editors/pure";
    </script>
    <script type="text/javascript" src="../editors/pure/js/mxClient.js"></script>
    <script src="../editors/dist/main.js"></script>
  </body>
</html>

So i want to add the 3 script tags seen in the above html to my vue js file.So for this i have tried to create the script tags manually in the mounted function of the vue file as seen below-

my vue js file

<template>
<div id="geApp">
</div>
</template>

<script>
const client = '../editors/pure/js/mxClient.js'
const mains = '../editors/dist/main.js'
 mounted () {
    var a = document.body.getElementsById("geApp")
    let basePath = document.createElement('script')
    basePath.innerText = 'mxBasePath = "../editors/pure"'
    basePath.async = true
    a.appendChild(basePath)
    let recaptchaScript = document.createElement('script')
      recaptchaScript.setAttribute('src', './pure/js/mxClient.js')
      recaptchaScript.async = true
      a.appendChild(recaptchaScript)
      let processes = document.createElement('script')
      processes.setAttribute('src','./dist/main.js')
      processes.async = true
      a.appendChild(processes)
  },

.....
.....

</script>

Unfortunately iam getting an error saying http://localhost/editors/dist/main.js net::ERR_ABORTED 404 (Not Found) from main.js file.So how do i load these scripts correctly in my vue js file?

Upvotes: 1

Views: 3324

Answers (2)

Hasan
Hasan

Reputation: 41

Check this "How to add external JS scripts to VueJS Components" or search it in stackoverflow search box. Hope you will get the answer.

Upvotes: 1

Syed
Syed

Reputation: 16513

If files that you are trying to add are some libraries/plugins that doesn't support import or require for some reason only then you try to do the way you are adding the file to DOM:

Anyhow, If you are sure and don't care about webpack processing your .js files in anyways, then keep your files in ./public/assets/js/ folder, then just do:

<script src="./assets/js/your-file.js"></script>

Upvotes: 1

Related Questions