Include bootstrap.js external script in Vuejs single-file components

Question

I'm using several external libraries to build charts with tooltips within a vue app. I'm using single-file components

I've got a working fiddle, but haven't been able to translate it into a working component.

Methods attempted:

Load the 3 tooltip-realted scripts in the <head> tag
- "TypeError: tooltipAnchor.tooltip is not a function"
Load the 3 tooltip-realted scripts in the <body> tag, before tag for compiled vue code (build.js)
- "TypeError: tooltipAnchor.tooltip is not a function"
Load the 3 tooltip-realted scripts in the Chart.vue component in the mounted hook
- "TypeError: tooltipAnchor.tooltip is not a function"

Chart.vue:

mounted: function mounted() {
  this.loadJS('https://code.jquery.com/jquery-3.2.1.slim.min.js')
  .then(() => {
    console.log('jquery loaded');
    return this.loadJS('https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js');
  })
  .then(() => {
    console.log('popper loaded');
    return this.loadJS('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js')
  })
  .then(() => {
    console.log('bootstrap loaded');
    this.buildChart();
  });
},
methods: {
  loadJS: function loadJS(url) {
    return this.$http.get(url);
  }
  ...
}

Require all three scripts at the top of Chart.vue:
- Bootstrap cannot load because jQuery isn't a global variable available to it

I suspect something is wrong with the order scripts are loading when I put them in index.html, but I cannot tell what. Does anyone know how jsfiddle compiles its html? What else am I missing?

Have you tried to use vue-strap?, it's a Boostrap built in components for Vuejs, it does not need to install jQuery yuche.github.io/vue-strap — ricardoorellana
– ricardoorellana, Commented Oct 17, 2017 at 20:57
Because of the other libraries I'm using, I'm not sure how vue-strap would work. The tooltip anchor needs to be appended to an svg. — ebbishop
– ebbishop, Commented Oct 17, 2017 at 21:00

ebbishop · Accepted Answer · 2017-10-18 13:24:09Z

6

Finally found the solution:

Include jquery in index.html:

<body>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <div id="app"></div>
  <!-- inject:js -->
  <script src="/js/build.js"></script>
  <!-- endinject -->
</body>

and import/require bootstrap in the vue component Chart.vue:

<template>
    <div id="chart"></div>
</template>
<script type="text/javascript">
  var d3 = require('d3');
  var Plottable = require('plottable');
  var bootstrap = require('bootstrap');

...

The method that creates & updates tooltips now works as expected.

answered Oct 18, 2017 at 13:24

ebbishop

2,0132 gold badges24 silver badges55 bronze badges

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

Comments

xaksis · Accepted Answer · 2017-10-18 12:29:57Z

0

It seems that you're making the ajax requests to these JS files however you're not doing anything with the response? A better way to do this would be

download the files locally
put them in the same directory as your single file component
import the local files right above your component

```

<script>
  // assuming you're using a transpiler? use appropriate syntax here
  import './popper.min'
  import './bootstrap.min';

  var vm = new Vue({
  el: '#app',
  data: {
    data_2017: [{
    x: '6th Grade',
    y: 12
  }, // ...

```

answered Oct 18, 2017 at 12:29

xaksis

4581 gold badge6 silver badges14 bronze badges

1 Comment

ebbishop Over a year ago

I've also tried this - see #4 in my question. I'm trying to put together a single-file component, so the syntax is slightly different, but just requiring/importing the correct libraries doesn't work. And it's not clear from documentation how else I should instantiate bootstrap tooltips

Collectives™ on Stack Overflow

Include bootstrap.js external script in Vuejs single-file components

Methods attempted:

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Methods attempted:

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related