Vuejs : Include local javascript file with <script> tag

Question

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 ?

"without success" - Have you done any debugging? Are you using the browser console and network pane? — Álvaro González
– Álvaro González, Commented May 21, 2021 at 9:52
static is not a prefixed directory. It is mapped directly into the root at both run and compile time. therefore, /js/jvenn.min.js will work. — Ohgodwhy
– Ohgodwhy, Commented May 21, 2021 at 9:57
@FlYiNGPoTAToChiP and @Ohgodwhy it returns the error $(...).jvenn is not a function — user1595929
– user1595929, Commented May 21, 2021 at 10:05

tony19 · Accepted Answer · 2021-05-22 22:09:18Z

2

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.

answered May 22, 2021 at 22:09

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

FlYiNGPoTAToChiP · Accepted Answer · 2021-05-21 10:12:16Z

0

if

js
└─jvenn.min.js
index.html

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

answered May 21, 2021 at 10:12

FlYiNGPoTAToChiP

1694 bronze badges

1 Comment

user1595929 Over a year ago

I should have clearer mentioned, I'm using vuejs, I added the info in the title

Collectives™ on Stack Overflow

Vuejs : Include local javascript file with <script> tag

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related