How to use tabs in Vue-strap · Hao's learning log

Vue-strap is a repository that contains a set of native Vue.js components based on Bootstrap's markup and CSS. This is all very well and good, however, the second I tried to use this I came across issues.

1. I didn't know how to import the components

I was using Webpack, and this is the way to import a component. The other notation did not work for me, probably for good reasons but I never found out why.

import alert from 'vue-strap/src/alert'

2. Requires Bootstrap CSS on the HTML page

This sounds stupid now I managed to work it out, but Vue CLI by default does not load CSS. So the simplest way is to include this in the <head> tag of your HTML page.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

3. Tabs simply refuses to work

It took me a while to finally work this out, the documentation is simply rubbish when it came to explaining how Tabs works. The example code (listed below) looks pretty simple.

<tabs>
  <tab header="one">
    ...
  </tab>
  <tab header="two">
    ...
  </tab>
  <tab header="three" disabled>
    ...
  </tab>
</tabs>

import tab from 'vue-strap/src/tab'

If I import the tab component surely this should work, right?

No! This is only half of the story. Import tab is correct, but you know <tabs>? Yep, that needs to be imported as well. The logical thing to call it would be 'Tabs.vue', but that would be way too easy. It is actually called 'Tabset.vue', so you got to also import the following to get tabs working.

import tabs from 'vue-strap/src/tabset'

Not sure why they thought it is a good idea to leave out this pretty important information, especially for someone who is new to Vue. But here you go, hopefully, saved you some time and pain.

Joking aside, this is actually a pretty cool project, you can find it at yuche.github.io.