VueJS doesn't load Jquery

Question

I am planning to use bootstrap so I first imported jquery.min file by using require() in main.js However, bootstrap throws an error like Bootstrap's JavaScript requires jQuery even I imported the jquery file before bootstrap.

main.js:

import vueResource from 'vue-resource';
import VueHead from 'vue-head';
import Vue from 'vue';
import router from './router';

require('../node_modules/bootstrap/dist/css/bootstrap.min.css');
require('../node_modules/font-awesome/css/font-awesome.min.css');
require('../node_modules/simple-line-icons/css/simple-line-icons.css');
require('./assets/css/app.css');

require('../node_modules/jquery/dist/jquery.min');
require('../node_modules/bootstrap/dist/js/bootstrap.min');
.....

I installed bootstrap(version 3.3.7) and jquery(version 3.2.1) from npm.

What is the correct way to import jquery so bootstrap won't throw the not found jquery error?

I don't think jquery.min or bootstrap.min will work. .min is just a version of the file that has all unnecessary characters removed in order to make the file size smaller. You still need to indicate what type of file this is. Looks like you just need to add .js after both jquery.min and bootstrap.min. — Aaron Eveleth
– Aaron Eveleth, Commented Oct 3, 2017 at 21:07
adding .js after both of them didn't change anything. I am using WebStorm application to build the project. It actually wrote that path without .js — Eniss
– Eniss, Commented Oct 3, 2017 at 21:10
Ah, interesting. Unfortunately I don't have any experience with WebStorm. I did, however, come across this SO post that may help. — Aaron Eveleth
– Aaron Eveleth, Commented Oct 3, 2017 at 21:15

marc_s · Accepted Answer · 2020-11-17 21:48:48Z

1

You need to expose jQuery globally so that bootstrap can initialise using jQuery object.

Try this:

window.jQuery = window.$ =require('../node_modules/jquery/dist/jquery.min')

edited Nov 17, 2020 at 21:48

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Oct 4, 2017 at 11:59

Manav Mandal

3251 gold badge2 silver badges7 bronze badges

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

Collectives™ on Stack Overflow

VueJS doesn't load Jquery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related