twitter-bootstrapvue.jsbootstrap-4jsfiddleplottable

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

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:

  1. Load the 3 tooltip-realted scripts in the <head> tag

    • "TypeError: tooltipAnchor.tooltip is not a function"

  2. 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"

  3. 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);
  }
  ...
}

  1. 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?

Solution

  • 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.