Include bootstrap features into a custom vuejs component

Question

I'm asked to add a new html page to a vuejs project. This page is already fully developed and is based on jquery and some twitter-bootstrap features.

I've created a new component.

newPage.vue

<template>
    <div id="my-new-page">
        ...
    </div>
</template>

<style src="path/to/_bootstrap.scss" lang="scss" scoped></style>
<style src="path/to/font-awesome.scss" lang="scss" scoped></style>
<style src="path/to/animate.css" scoped></style>
<style src="path/to/custom/css.css" scoped></style>


<script src="path/to/custom/js.js"></script>

js.js

   import jQuery from 'jquery';
   // Same error even with window.$ = window.jQuery = jQuery;
   import collapse from 'path/to/bootstrap/feature/collapse.js";

   export default {
       created() {
           runjQuery(jQuery);
       },
   };

   function runjQuery($) {
       // here is how I thought integrate the jquery script of the new html page
       $(function () {
            ....
            $('#navbar').collapse('hide');
       });
   }

But this obviously does not work because collapse.js cannot access jQuery and I get this error

Uncaught ReferenceError: jQuery is not defined

How do I fix this problem?

Given that I don't want (if possible) to add bootstrap and jquery globally to my project because this will surely breaks here and there in my other components?

Have you taken a look at vue-strap? https://wffranco.github.io/vue-strap/ — enriqg9, Aug 16 '17 at 12:56
@enriqg9 there are not all the features I need, collapse for instance — smarber, Aug 16 '17 at 13:08
I suspect you need the bracketed form of `import`. See https://stackoverflow.com/a/43546877/392102 — Roy J, Aug 16 '17 at 13:26
@RoyJ I have no problem Injecting jquery, the problem is when injecting bootsrap which depends on jquery — smarber, Aug 16 '17 at 13:29

score 0 · Answer 1 · answered Aug 16 '17 at 13:30

Verify that jQuery isn't already loaded. Loading it twice might cause some issues. Remove your jquery import and maybe check in console.log($) if they've built it on jQuery chances are it's already there.
If 1. fails you have to import jQuery in you main js file or to import it globally.

score 0 · Accepted Answer · answered Aug 16 '17 at 13:40

I figured it out, require works while import does not.

 // Declare $ and jQuery globally into my whole app :(
 window.$ = window.jQuery = jQuery;
 // this does not work
 // import collapse from 'path/to/bootstrap/feature/collapse.js";
 require('path/to/bootstrap/feature/collapse.js');

Include bootstrap features into a custom vuejs component

2 Answers2