If you plan to use Bootrap 4 directly without the convinience of Vue.js components, refer to Setup Bootstrap 4 With Vue Cli 3 Webpack.
Pros of BootstrapVue
- No jQuery dependencies
- All Bootstrap Components is a Vue.js component, so you can use vue.js syntax for data binding and event handling.
Cons of BootstrapVue
- If the Bootstrap Components require JavaScript interaction (using
data-toggle), like Dropdowns, you must use BootstrapVue Dropdowns for dropdown to work. Refer to this issue and migration guide.
This following Bootstrap Dropdowns will render, but clicking on the button will not show the drop down.
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div></div>NOTE: If might be possible to hack it by including bootstrap.js and jQuery, but I didn't explore further.
NOTE: Normal Bootstrap syntax still works if no JavaScript interation is required, like Alerts.
Must use the BootstrapVue Dropdowns instead.
<div> <b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2"> <b-dropdown-item>Action</b-dropdown-item> <b-dropdown-item>Another action</b-dropdown-item> <b-dropdown-item>Something else here</b-dropdown-item> </b-dropdown></div>vue-cli
I am using Vue via vue-cli.
I setup with
- VueRouter
- TypeScript
- SCSS
Install
npm install bootstrap-vuemain.ts
Edit main.ts.
import Vue from 'vue'import BootstrapVue from 'bootstrap-vue'import 'bootstrap/dist/css/bootstrap.css'import 'bootstrap-vue/dist/bootstrap-vue.css'import App from './App.vue'// import './registerServiceWorker'// import router from './router'Vue.config.productionTip = falseVue.use(BootstrapVue)new Vue({ router, render: h => h(App)}).$mount('#app')NOTE: There is a vue cli 3 plugin as well, but I didn't try it.
index.html
Edit public/index.html
- Add
<meta name="viewport">.
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>journey-static</title> </head> <body> <noscript> <strong>We're sorry but journey-static doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <!-- <div class="container"> <div id="app"></div> </div> --> <div id="app"></div> <!-- built files will be auto injected --> </body></html>App.vue
Edit src/App.vue.
- I put in
Navbarwithrouter-linksupport
<template> <div id="app"> <b-navbar toggleable="lg" type="dark" variant="info"> <div class="container"> <!-- <b-navbar-brand href="/">Journey</b-navbar-brand> --> <!-- use router-link --> <b-navbar-brand to="/">Journey</b-navbar-brand> <b-navbar-toggle target="nav-collapse"></b-navbar-toggle> <b-collapse id="nav-collapse" is-nav> <b-navbar-nav> <!-- <b-nav-item href="/about">About</b-nav-item> --> <b-nav-item to="/about">About</b-nav-item> </b-navbar-nav> </b-collapse> </div> </b-navbar> <!-- <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> --> <div class="container" style="padding-top: 16px;"> <router-view/> </div> </div></template><style lang="scss">#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50;}/*#nav { padding: 30px; a { font-weight: bold; color: #2c3e50; &.router-link-exact-active { color: #42b983; } }} */</style>Home.vue
Edit src/views/Home.vue.
<template> <div class="home"> <div class="alert alert-primary" role="alert"> This is Home </div> </div></template><script>// @ is an alias to /src// import HelloWorld from '@/components/HelloWorld.vue'export default { name: 'home', components: { // HelloWorld }}</script>References: