I'm new to Vue and webpack in general and I'm having a hard time figuring out how to import things.
I created a fresh Vue project through vue init
I added bootstrap 4 with yarn add [email protected]
In main.js I try to import bootstrap and jquery:
import Vue from 'vue'; import jQuery from 'jquery'; import bootstrap from 'bootstrap'; import App from './App'; import router from './router';
But I get:
Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
window.jQuery = window.$ = $;
does not work
Finally, where and how do I load the Sass such that it's available to the whole app?
To use Bootstrap with Vue, 'bootstrap-vue' provides various components to use as a Vue component. For example, a button can be created using the 'bootstrap-vue' like this.
Under the folder, copy the extracted files downloaded from bootstrap. Under the head tag of the HTML file, the CSS needs to be linked. The jQuery downloaded should also be copied under the JS file. Make sure that under the project file, the downloaded files and HTML page must be present in that folder.
In your main. js file, add the following code to register the functionality provided by bootstrap as a Vue Component and make the CSS available. import Vue from 'vue' import BootstrapVue from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap. css' import 'bootstrap-vue/dist/bootstrap-vue.
I was having the same issue and this is what I ended up with however, I didn't use Bootstrap alpha since the beta has since been released.
npm install [email protected] popper.js jquery --save-dev
/build/webpack.dev.conf.js
file to add a plugin for jQuery and Popper.js to deal with dependencies (you can read more about that in the Bootstrap docs):plugins: [ // ... new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'], // In case you imported plugins individually, you must also require them here: Util: "exports-loader?Util!bootstrap/js/dist/util", Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", // ... }) // ... ]
/src/main.js
to import Bootstrap into the app's entry point:import Vue from 'vue' import App from './App' import router from './router' import 'bootstrap' // ←
<style>
portion to import Bootsrap into your app's root css:<template> <div id="app"> <img src="./assets/logo.png"> <router-view></router-view> </div> </template> <script> export default { name: 'app' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } @import'~bootstrap/dist/css/bootstrap.css' </style>
npm start
I had to add the @import rule after the #app selector, otherwise the scoped styling would be canceled out by the Bootstrap import. I think there is a better way to do this so I will update my answer once I figure it out.
You don't want to do any kind of adjustment in webpack.config.js
like adding jQuery global in plugin array. Once you installed all bootstrap
dependencies like jQuery
and popper
than just import
them in app.vue
or main.js
(you can import separately in each component if you wish)
import 'bootstrap/dist/css/bootstrap.min.css' import 'jquery/src/jquery.js' import 'bootstrap/dist/js/bootstrap.min.js'
thats it ..
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With