Bootstrap 3 as Vue2 component
Just wrap your standard bootstrap html with vue2-strap and hit run.
<html>
<head></head>
<body>
<div id="app">
<button v-tooltip type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on bottom">Tooltip on bottom</button>
<dropdown>
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> Drop down <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#"> Action</a></li>
<li><a href="#"> Another action</a></li>
<li><a href="#"> Something else here</a></li>
</ul>
</dropdown>
</div>
</body>
</html>// main.js
import Vue from 'vue';
import bootstrapcss from 'bootstrap/css/bootstrap.min.css';
import tooltip from 'bootstrap/tooltip.vue';
import dropdown from 'bootstrap/dropdown.vue';
new Vue({
el: '#app'.
render: h => h(App),
components: {
dropdown: dropdown,
},
directives: {
tooltip: tooltip
}
});Note: Those components only works with vue> 2.1.8
- download the source
npm install --save vue2-strap- add resolve
In your
webpack.config.js(orwebpack.base.conf.js), add resolve alias for vue2-strap
module.exports = {
entry: ...
output: ...
module: ...
resolve: {
alias: {
'vue$': ...,
'bootstrap': 'bootstrap': path.resolve(__dirname, '../node_modules/vue2-strap/dist')
}
},
...
}- [?] Transitions
- [x] Modal
- [x] Dropdown
- [x] Scrollspy
- [x] Tab
- [?] Tooltip
- [x] Popover
- [x] Alert
- [x] Button
- [x] Carousel
- [x] Collapse
- [x] Affix
- [x] Dropdown Hover
- [ ] Typehead