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 bootstrap@4.0.0-alpha.6
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?
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 bootstrap@4.0.0-beta 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 ..
With Vue CLI v3.x/v4.x, you can also use the @techiediaries/vue-cli-plugin-bootstrap to quickly add the latest Bootstrap 4 version in your Vue project without manually adding any files or settings.
Head over to a new command-line interface, navigate to your project's folder and run the following command:
$ vue add @techiediaries/bootstrap
The plugin will take care of adding any configuration options and install the dependencies into your project so you can start using Bootstrap classes right away without spending time figuring out what settings or dependencies you need to add.
I will try to be as precise as possible
1.Go the the Vue Cli project run :
npm i bootstrap jquery popper.js
2.Go to src/main.js
import like:
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
Only For Bootstrap 5
Follow the below in cmd
vue create project-name
Select Vue version
cd project-name
npm i bootstrap @popperjs/core (just bootstrap means latest available bootstrap version)
(or)
i)npm i bootstrap (to install bootstrap)
ii)npm install --save @popperjs/core (to install popper.js)
Note: Try this if only point 4 emits error
Add the below to src/main.js import 'bootstrap'; import 'bootstrap/dist/css/bootstrap.min.css';
Done now bootstrap will work on Vue-Cli
For Gridsome users, the solution is exactly the same!
yarn add jquery bootstrap popper.js
import 'jquery/src/jquery.js';
import 'popper.js/dist/popper.min.js';
import 'bootstrap/dist/js/bootstrap.min.js';
You can also import the css here like this import 'bootstrap/dist/css/bootstrap.min.css'
however bootstrap provides a SCSS file which can be highly customisable, if you want this kind of customisation, import in the main.js
file a new scss file
// Load core styling
import '~/assets/styles/core.scss';
and then import bootstrap like this
@import '~bootstrap/scss/bootstrap';
@import 'theme.scss';
The theme.scss follows this document https://getbootstrap.com/docs/4.0/getting-started/theming/
根据您已经安装的软件包(例如 Vuetify),您可能无法使用 boostrap 4 + vue 3。在按照线程中的说明操作之前,请检查您的版本以确认!
As usual in JS ecosystem the answers get out of date very quick.. this is what is working for my right now:
$ yarn add jquery bootstrap @popperjs/core
├─ @popperjs/core@2.11.5
├─ bootstrap@5.2.0
└─ jquery@3.6.0
// main.js
import '@popperjs/core/dist/umd/popper';
import 'bootstrap/dist/css/bootstrap.min.css'
import 'jquery/src/jquery.js'
import 'bootstrap/dist/js/bootstrap.min.js'
Brother, Greetings! Simple way to install and configure Bootstrap in your Vue project is that
First install bootstrap using a command in the terminal of the IDE which is below:
npm i bootstrap
You need to configure this in your main.js file so that it is applied to the whole project. You need to import this from node_modules folder to use it in project.
import "../node_modules/bootstrap/dist/css/bootstrap.css";
import "../node_modules/bootstrap/dist/js/bootstrap.bundle";
Just paste these lines in your main.js file because this is the path where your required bootstrap files will be if not then check the path and edit this path.
If you want to test whether it has worked or not, go to the app component and create a button , provide it a bootstrap class and run the project to see whether it is working or not.
use Bootstrap CDN and include it as a in your index.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
I never used Bootsrap with Vue.js, as I'm not a fan. But when I used Bulma's sass, first I did npm install
for Bulma. Then I created a folder in src/assets/sass
and inside it created a main.scss
and inside it I imported bulma by @import '~bulma/bulma';
jQuery is not required in current version (Right now: "bootstrap": "^4.4.1", "bootstrap-vue": "^2.5.0")
npm install bootstrap-vue bootstrap --save
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';
Vue.use(BootstrapVue)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.