Vuejs : Include local javascript file with <script> tag

2k Views Asked by user1595929 At 20 October 2024 at 22:28

I would like to include in a vuejs component this jquery plugin : http://jvenn.toulouse.inra.fr/app/js/jvenn.min.js.

to do so, I added these lines

mounted () {
  const jvenn = document.createElement('script')
  jvenn.setAttribute(
    'src',
    'http://jvenn.toulouse.inra.fr/app/js/jvenn.min.js'
  )
  jvenn.async = true
  document.head.appendChild(jvenn)
}

it works fine, but I'd like to have a local copy of this script in case this file will no longer be online. I tryed to add it in my assets directory, and to change http://jvenn.toulouse.inra.fr/app/js/jvenn.min.js by /static/js/jvenn.min.js without success.

Any idea ?

Original Q&A

There are 2 best solutions below

FlYiNGPoTAToChiP On 21 May 2021 at 10:12

js
└─jvenn.min.js
index.html

then it will be just js/jvenn.min.js

tony19 On 22 May 2021 at 22:09

Assuming a Vue CLI scaffolded project, put the third party script in the public folder to make it a static asset:

public
└─js
|  └─jvenn.min.js
└─index.html

Then edit public/index.html to import the script:

<body>
  <script src="<%= BASE_URL %>js/jvenn.min.js"></script>
</body>

The <%= BASE_URL %> prefix in src is important if the project's base URL is configured.

Vuejs : Include local javascript file with <script> tag

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in VUE.JS

Related Questions in VENN

Trending Questions

Popular # Hahtags

Popular Questions