saurabh saurabh - 7 days ago 6
CSS Question

Bootstrap tabs not working in Vue app

I am creating an app with vue, vue-router and bootstrap. I am trying to implement tags in bootstrap, like following:

<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#profile" role="tab" data-toggle="tab">profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#buzz" role="tab" data-toggle="tab">buzz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#references" role="tab" data-toggle="tab">references</a>
</li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="profile">...</div>
<div role="tabpanel" class="tab-pane fade" id="buzz">bbb</div>
<div role="tabpanel" class="tab-pane fade" id="references">ccc</div>
</div>


This code work without an issue without Vuejs: fiddle

But when I use this same code with Vue and Vue router, It stops working, I am not getting any error either.

const router = new VueRouter({
mode: 'history',
routes: [
{ name: 'Tabs', path: '/', component: Tabs }
]
})
new Vue({ el: '#app', store, router })


Complete fiddle with not working tabs here.

What I have figured is, if I remove
mode history
from the router it starts to work, but that I can not do.

mode: 'history',


Why this is happening and how can this be fixed.

Answer

with your example it is due to vue-router not matching the path / so never serving the tabs:

Fiddle Demo

If the issue is coming in as jQuery is pushing a hash URI then you will likely need to add a wildcard to your routes path to match this new URI, i.e.

http://example.com/tabs-path#3

route:

{ name: 'Tabs', path: '/tabs-path*', component: Tabs }