Twitter Bootstrap Question posted in

Include bootstrap features into a custom vuejs component – Twitter bootstrap

I’m asked to add a new html page to a project. This page is already fully developed and is based on and some 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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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');

  2. 0
    1. 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.
    2. If 1. fails you have to import jQuery in you main js file or to import it globally.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search