title: Bootstrap tabs not working in Vue app
body: <p>I am creating an app with vue, vue-router and bootstrap. I am trying to implement tags in bootstrap, like following:</p>
  
  <pre><code>&lt;ul class="nav nav-tabs" role="tablist"&gt;
    &lt;li class="nav-item"&gt;
      &lt;a class="nav-link active" href="#profile" role="tab" data-toggle="tab"&gt;profile&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="nav-item"&gt;
      &lt;a class="nav-link" href="#buzz" role="tab" data-toggle="tab"&gt;buzz&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="nav-item"&gt;
      &lt;a class="nav-link" href="#references" role="tab" data-toggle="tab"&gt;references&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;!-- Tab panes --&gt;
  &lt;div class="tab-content"&gt;
    &lt;div role="tabpanel" class="tab-pane fade in active" id="profile"&gt;...&lt;/div&gt;
    &lt;div role="tabpanel" class="tab-pane fade" id="buzz"&gt;bbb&lt;/div&gt;
    &lt;div role="tabpanel" class="tab-pane fade" id="references"&gt;ccc&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This code work without an issue without Vuejs: <a href="http://jsfiddle.net/j4o11vj9/" rel="nofollow noreferrer">fiddle</a></p>
  
  <p>But when I use this same code with Vue and Vue router, It stops working, I am not getting any error either.</p>
  
  <pre><code>const router = new VueRouter({
      mode: 'history',
      routes: [
      { name: 'Tabs', path: '/', component: Tabs }
    ]
  })
  new Vue({ el: '#app', store, router })
  </code></pre>
  
  <p>Complete fiddle with not working tabs <a href="http://jsfiddle.net/u8Ld9bLw/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>What I have figured is, if I remove <code>mode history</code> from the router it starts to work, but that I can not do.</p>
  
  <pre><code>mode: 'history',
  </code></pre>
  
  <p>Why this is happening and how can this be fixed.</p>