1

I am trying to add external js file in vue app.vue. But it's not working. I followed this as adding external style sheet. Also want to include in a component for another js file. I am beginner in vue js. How can I include this. Thanks in advance . I am using vue cli

App.vue

  <template>
    <div id="app">
       <router-view/>
    </div>
  </template>

 <script>
    @import './assets/plugins/bootstrap/js/popper.min.js';
    @import './assets/plugins/bootstrap/js/bootstrap.min.js';
    @import './assets/js/jquery.slimscroll.js';
  </script>
Mithun
  • 255
  • 1
  • 7
  • 17

1 Answers1

3

One of these

<script src='./assets/plugins/bootstrap/js/popper.min.js'></script>
<script src='./assets/plugins/bootstrap/js/bootstrap.min.js'></script>
<script src='./assets/js/jquery.slimscroll.js'></script>

or

<script>
export default
{
   import './assets/plugins/bootstrap/js/popper.min.js';
   import './assets/plugins/bootstrap/js/bootstrap.min.js';
   import './assets/js/jquery.slimscroll.js';
}
</script>

But it would be better if you import scripts like these into your public/index.html file.

IVO GELOV
  • 13,496
  • 1
  • 17
  • 26
  • Thanks for reply. AS per your instruction I add those in **public/index.html** . Like **** and **** . but it's not working – Mithun Jun 05 '20 at 02:33
  • You should check whether these are the right paths to use - the paths in **public/index.html** are relative to this file at the time of its deployment while the paths in your ES6 JavaScript module are relative to that file (probably inside **src** folder) – IVO GELOV Jun 05 '20 at 11:22
  • I also tried with that. **** but not working. folder structure is **src/assets/styles/style.css** and **src/assets/js/popper.min.js** – Mithun Jun 05 '20 at 13:16
  • How can I access files from **src/...** because my index file is in **public** folder. – Mithun Jun 05 '20 at 13:18
  • You have to put such files inside the **public** folder. – IVO GELOV Jun 05 '20 at 13:59
  • I did that. It's working if i place all content in one component . But when I segregate them into multiple component and combine , that time **js** file not working. But contents show successfully – Mithun Jun 05 '20 at 15:08