Including external script in vue.js template nuxt

Question

i try this solution to use external js but did't work

<template>
  <div>
    <script
      type="application/javascript"
      defer
      src="/assets/javascript/jquery.flexslider-min.js"
    ></script>
  </div>
</template>

the error shown

GET http://localhost:3000/assets/javascript/jquery.flexslider-min.js net::ERR_ABORTED 404 (Not Found)

https://stackoverflow.com/questions/59015259/include-external-javascript-file-in-a-nuxt-js-page — omerS, Jul 07 '21 at 07:47

score 1 · Answer 1 · answered Jul 07 '21 at 07:15

1

When you use vue or nuxt, the proper way to use external packages is by installing them on your projects using npm or yarn or another package manager.

answered Jul 07 '21 at 07:15

Abregre

486
4
11

thank you i try to put a file to static folder then it work. – chojon Aug 04 '21 at 08:43

score 1 · Accepted Answer · answered Jul 07 '21 at 08:58

If you're planning to use some NPM packages, the way to go is Nuxt plugins.
If you're more into loading 3rd party scripts, the approach explained here is the way to go: https://stackoverflow.com/a/67535277/8816585

By the look of your jQuery file, you will probably be interesting by this article: https://vueschool.io/articles/vuejs-tutorials/how-to-load-third-party-scripts-in-nuxt-js/

But if you can, try to either use NPM packages or look for packages in the Vue ecosystem rather than using jQuery.

Including external script in vue.js template nuxt

2 Answers2