Use Component bootstrap in Vue.js
If you come from a background as a web developer, you definitely know bootstrap. yes bootstrap is a css framework of the most popular and very complete its documentation. and in this tutorial I will use the feature feature in bootstrap and make it as a component that we will use repeatedly. Let's we just start.
What Will I Learn?
- Install bootstrap in vue
- Import and use bootstrap in vue
- Make bootstrap component
Requirements
- Install Node.js
- Install Vue-cli
- Intermediate knowledge in css
- Basic javascript and es6
Difficulty
- Basic
Install bootstrap in vue and use it
If you usually use bootstrap by CDN or download it, this time I will install bootstrap via NPM. Here's how to install it.
npm i bootstrap-vue
if there is no error then you will be able to result like the picture above.
Import and use bootstrap in vue
Now we will use and import the bootstrap in vue.js. first step would be to register it on main.js.
import Vue from 'vue'
import App from './App'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '',
components: { App }
})
import BootstrapVue from 'bootstrap-vue'
: Import the bootstrap.
Vue.use(BootstrapVue)
: Tell the vuejs to use BootstrapVue
< link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/css/bootstrap.css" >
< link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" >
The second way is to import in the component template . vue like this.
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Both of which can function properly, only according to the choice there is only.
Make bootstrap component
After we can installed bootstrap and imported its css, now we can start using bootstrap feature feature into component. And I'll use some of the sample components we use in the vue template.
< b-alert show variant="primary">Primary Alert< /b-alert>
< b-alert show variant="secondary">Secondary Alert< /b-alert>
< b-alert show variant="success">Success Alert< /b-alert>
< b-alert show variant="danger">Danger Alert< /b-alert>
< b-alert show variant="warning">Warning Alert< /b-alert>
< b-alert show variant="info">Info Alert< /b-alert>
< b-alert show variant="light">Light Alert< /b-alert>
< b-alert show variant="dark">Dark Alert< /b-alert>
< h2>Example heading New< /h2>
< h3>Example heading New< /h3>
< h4>Example heading New< /h4>
< h5>Example heading New< /h5>
< h6>Example heading New< /h6>
<b-breadcrumb :items="items"/>
data(){
return{
items: [{
text: 'Home',
href: '#'
}, {
text: 'Profil',
href: '#'
}, {
text: 'username',
href: '#'
}, {
text: 'edit',
active: true
}]
}
},
< b-jumbotron header="Bootstrap Vue" lead="Bootstrap 4 Components for Vue.js 2" >
< p>For more information visit website< /p>
< b-btn variant="primary" href="#">More Info< /b-btn>
< /b-jumbotron >
We have successfully used bootstrap and made its component in our template, there are so many that we can use in bootstrap. you can try it yourself step visit the official website https://bootstrap-vue.js.org. just so much of me hopefully this tutorial can help you who can not get out of bootstrap and want to use it in vue.js. thank you
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Hey @alfarisi94 I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x