Tabs have no CSS

[pzjzeason]

I'm new with Vue and Vue cli. I'd like to try out this tabs-component, and my code in App.vue is as follows:

<template>
  <div>
    <tabs>
        <tab name="First tab">
            First tab content
        </tab>
        <tab name="Second tab">
            Second tab content
        </tab>
        <tab name="Third tab">
            Third tab content
        </tab>
    </tabs>
  </div>
</template>

<script>
import Vue from 'vue';
import {Tabs, Tab} from 'vue-tabs-component';
Vue.component('tabs', Tabs);
Vue.component('tab', Tab);
export default {
  name: 'App'
}
</script>

In browser:

What can I do to fix it, please show me the way!

[karam94]

You have to manually put the CSS in yourself.

https://github.com/spatie/vue-tabs-component/blob/master/docs/resources/tabs-component.css

Good luck!

[mkosir]

pzjzeason, add a following line into your component script:
import 'vue-tabs-component/docs/resources/tabs-component.css';
This will addd default styling to the component.