Is there a way to disable default styles? I would like to use my own styles and vue-tabs use classes names that I already defined for other components

Like in this example, https://jsfiddle.net/b44cc4dq/56/
there is a nav-justified class,

is there a way to add this without hacking in the package css part, as the ul part is produced by the package.
tried with centered property, but all the tabs will be stacked together, I am using vue-tabs with bootstrap 4.
Update: found the below width rule controls on this
@media (min-width: 768px)
<style>…</style>

.vue-tabs .nav-justified > li, .vue-tabs .nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
anyway to override this? So far tried to override inside vue single page component <style> part, no luck.
Cheers.

Hi,

I'm trying to load vue tabs with laravel mix in this way:

JS:
window.VueTabs=require('vue-nav-tabs');
Vue.use(VueTabs);

HTML:


First tab content

    <v-tab title="Second tab">
        Second tab content
    </v-tab>

    <v-tab title="Third tab">
        Third tab content
    </v-tab>
</vue-tabs>

I'm receiving the bellow error. How should I initialize it ?

vue.common.js:436 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in )
warn @ vue.common.js:436
createElm @ vue.common.js:4864
createChildren @ vue.common.js:4973
createElm @ vue.common.js:4879
createChildren @ vue.common.js:4973
createElm @ vue.common.js:4879
patch @ vue.common.js:5344
Vue._update @ vue.common.js:2318
updateComponent @ vue.common.js:2441
get @ vue.common.js:2780
Watcher @ vue.common.js:2763
mountComponent @ vue.common.js:2445
Vue$3.$mount @ vue.common.js:7572
Vue$3.$mount @ vue.common.js:9671
Vue._init @ vue.common.js:4012
Vue$3 @ vue.common.js:4097
(anonymous) @ demo:153
3vue.common.js:436 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in )

Cool component. But if I want the tabs to lie horizontal instead of the default vertical in the JSFidle demo, how will I achieve that.

Thanks.

Hello, using href =" # " causes the screen to scroll up. I did not find a way to change this.
It would be nice to put the href =" title " with the title of the v-tab tag.
I await your comments, thank you.

Hi :)

the tab panel is display, but all v-tab includes are show, no error on debugger

Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

https://github.com/cristijora/vue-tabs/blob/master/src/components/VueTabs.js#L155

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy

Probably should change:

<a href="javascript:void(0)"

into:

<a href="#"

When running it with typescript I get an error:

ERROR in C:/xxx-vue/src/App.vue
15:21 Could not find a declaration file for module 'vue-nav-tabs'. 'C:/xxx-vue/src/node_modules/vue-nav-tabs/dist/vue-tabs.common.js' implicitly has an 'any' type.
Try npm install @types/vue-nav-tabs if it exists or add a new declaration (.d.ts) file containing declare module 'vue-nav-tabs';

Hello,

I have this error after build my project with webpack :
"Uncaught TypeError: Cannot set property 'exports' of undefined"

e.event=t,c[t]=e,l.props[t+"Options"]={type:Object,default:function(){return{}}}}.bind(f),f.component=l,t.exports=f})}])}

VueTab has a beforeChange method with the following comment:

/***
         * Function to execute before tab switch. Return value must be boolean
         * If the return result is false, tab switch is restricted
         */
        beforeChange: {
            type: Function
        },

Unfortunately it is not working for me. Please see this JSFiddle here:

https://jsfiddle.net/qgro0w6r/

What am I doing wrong?

Hi, thanks for the components. If I run https://jsfiddle.net/b44cc4dq/245/show/ but switch to a newer version of vue (2.5.13) I see that there is a warning. This does not seem to stop the functionality but, I believe the newer version of vue added the warning message.

vue.js:584 [Vue warn]: Duplicate keys detected: ''. This may cause an update error.

found in

--->

Thank you

The fix introduced with #21 breaks hash based navigations since it sets the hash everytime to #.

PR #29 is a possible solution to fix this.

When I load my app I get this even if my app works fine:

typeError: Cannot read property 'disabled' of undefined
    at VueComponent.changeTab (vue-tabs.js?53dd:137)
    at VueComponent.findTabAndActivate (vue-tabs.js?53dd:180)
    at VueComponent.value (vue-tabs.js?53dd:340)
    at Watcher.run (vue.runtime.esm.js?2b0e:3229)
    at flushSchedulerQueue (vue.runtime.esm.js?2b0e:2977)
    at Array.eval (vue.runtime.esm.js?2b0e:1833)
    at flushCallbacks (vue.runtime.esm.js?2b0e:1754)

"The pattern in the "src" property didn't match any files."

this is full log

0 info it worked if it ends with ok
1 verbose cli [ '/home/haliib/nuxt/nodejs/bin/node',
1 verbose cli '/home/haliib/nuxt/nodejs/bin/npm',
1 verbose cli 'run',
1 verbose cli 'deploy' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predeploy', 'deploy', 'postdeploy' ]
5 info lifecycle [email protected]predeploy: [email protected]
6 info lifecycle [email protected]deploy: [email protected]
7 verbose lifecycle [email protected]deploy: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]deploy: PATH: /home/haliib/nuxt/nodejs/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/haliib/explore/react/vue-tabs/node_modules/.bin:/home/haliib/flutter/flutter/bin:/home/haliib/flutter/flutter/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/usr/lib/jvm/java-8-oracle/bin:/usr/lib/jvm/java-8-oracle/db/bin:/usr/lib/jvm/java-8-oracle/jre/bin:/usr/lib/jvm/java-8-oracle/bin:/usr/lib/jvm/java-8-oracle/db/bin:/usr/lib/jvm/java-8-oracle/jre/bin:/usr/local/go/bin:/home/haliib/nuxt/nodejs/bin:/home/haliib/nodejs/node-v10.16.0-linux-x64/bin/
9 verbose lifecycle [email protected]deploy: CWD: /home/haliib/explore/react/vue-tabs
10 silly lifecycle [email protected]deploy: Args: [ '-c', 'npm run build:example && gh-pages -d example/dist' ]
11 silly lifecycle [email protected]deploy: Returned: code: 1 signal: null
12 info lifecycle [email protected]deploy: Failed to exec deploy script
13 verbose stack Error: [email protected] deploy: npm run build:example && gh-pages -d example/dist
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (/home/haliib/nuxt/nodejs/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:189:13)
13 verbose stack at ChildProcess. (/home/haliib/nuxt/nodejs/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:189:13)
13 verbose stack at maybeClose (internal/child_process.js:970:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid [email protected]
15 verbose cwd /home/haliib/explore/react/vue-tabs
16 verbose Linux 4.15.0-50-generic
17 verbose argv "/home/haliib/nuxt/nodejs/bin/node" "/home/haliib/nuxt/nodejs/bin/npm" "run" "deploy"
18 verbose node v10.15.1
19 verbose npm v6.4.1
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] deploy: npm run build:example && gh-pages -d example/dist
22 error Exit status 1
23 error Failed at the [email protected] deploy script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Note the Login URL text and the Edit button inside the tab content:

https://github.com/cristijora/vue-tabs/blob/master/themes/vue-tabs.css#L4-L6

.vue-tabs a {
  text-decoration: none;
color: gray; }

I feel that those lines should not be there...

It looks better too without it tbh:

(Sorry for the red box censored texts btw, but I hope you get the point.)

Hi!!
I'm trying to use vue-tabs component in my form, but to validate the form I'm using vee-validate. But when I change the tab, the input are not hidden in the screen and fails to valid :/

There is a way to not destroy the input, but just make it hidden? Via css?

I use vue-tabs within a modal, the tabs order keeps changing. e.g. when click a button to display modal first time, the first tab and its content will be chosen and display, then close it, when open the tabs again, the first tab would be the second tab this time, and after. is this about the index 0, 1 issue? Any one met this before?

In dist/vue-tabs.js there is one line with private path:

i.options.__file="C:\\work\\Github\\vue-tabs\\src\\components\\TabContent.vue"

I think it's confusing when you install npm package in different path and than you get Vue message with such path.

https://jsfiddle.net/Lacuqsjn/
I initialize the data in mouted mothed,but warn:
Prop startIndex set to 0 is greater than the number of tabs - 0. Make sure that the starting index is less than the number of tabs registered.

and the tab was not show.
How can i solve it？

I am trying to show hidden tab, but got not that expected. At first it shows both tabs, but later fixes it when clicked. See example here https://jsfiddle.net/p63evL20/

How to achieve this? I need to temporarily hide first tab and show it later.

Thanks.

ERROR in .//vue-nav-tabs/themes/vue-tabs.css
Module parse failed: /Applications/MAMP/htdocs/master/node_modules/vue-nav-tabs/themes/vue-tabs.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .vue-tabs.stacked {
| display: flex; }
|
@ .//buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/ServiceModule/_EditWorksheet.vue 10:0-41
@ ./resources/assets/js/components/ServiceModule/_EditWorksheet.vue
@ ./resources/assets/js/app.js

https://jsfiddle.net/psalmers/qch0sre4/3/

We are trying to initialize tabs programmatically, and when the value denoting the first tab declared in the dom is the initial value passed to v-model, the first tab's content does not display. Tabs other than the first tab correctly initialize. I have recreated this in the above fiddle based on the demo on how to programmatically set tabs.

Hello Cristijora,

Would not be good to have a handleTabChange in 2 versions?

What I mean its will be good to have a beforeTabChange and a afterTabChange, the uses cases could be several, I guess best argument will be to be able to set things inside the tab after things got loaded.

Great work btw.

It would be great if the current tab could be switched directly via a js function.

I'm beginner in VueJs. I've been trying to optimize some 2 level nested tabs with subtabs that have at least 6 highcharts each one. Currently vue-tabs is lazy rendering, which is good for some scenarios, but thinking how to experiment if still doing lazy rendering but with render only once, so the active tab is not destroyed after transition so next time is not going to be rendered again. Any ideas ?

I want to use an image in the tab instead of the icon, I have already done this by updating the main library files by replacing the icon function

` renderIcon: function renderIcon(index) {
var h = this.$createElement;

        if (this.tabs.length === 0) return;
        var tab = this.tabs[index];
        var icon = tab.icon;
        var imageSrc = tab.image;

        var simpleIcon = h(
            'object',
            {attrs: { data: imageSrc }}
        );
        if (!tab.$slots.title && imageSrc) return simpleIcon;
    },`

Is there is any way to use a better way? like extending the library?
I can't do this using Vuejs.
Any advice?

Did npm install vue-nav-tabs and it was missing.

vue-tabs.common.js:12 Uncaught Error: Cannot find module "babel-helper-vue-jsx-merge-props" at webpackMissingModule (vue-tabs.common.js:12) at eval (vue-tabs.common.js:12) at Object.../node_modules/vue-nav-tabs/dist/vue-tabs.common.js (index.bundle.js:82) at __webpack_require__ (index.bundle.js:20) at eval (header.js:3) at Object../header.js (index.bundle.js:116) at __webpack_require__ (index.bundle.js:20) at eval (index.js:9) at Object../index.js (index.bundle.js:128) at __webpack_require__ (index.bundle.js:20) webpackMissingModule @ vue-tabs.common.js:12 (anonymous) @ vue-tabs.common.js:12 ../node_modules/vue-nav-tabs/dist/vue-tabs.common.js @ index.bundle.js:82 __webpack_require__ @ index.bundle.js:20 (anonymous) @ header.js:3 ./header.js @ index.bundle.js:116 __webpack_require__ @ index.bundle.js:20 (anonymous) @ index.js:9 ./index.js @ index.bundle.js:128 __webpack_require__ @ index.bundle.js:20 (anonymous) @ index.bundle.js:69 (anonymous) @ index.bundle.js:72

Hi,

When is version 5.7 expected to be released?

I ask as at the moment to get the improvements of tab headings with scoped slot I have to pull off of git master rather than npmjs.com.

i want to control the tab switching means every tab switching time i want to ajax call and that response
i have to show in tabs body parts

Hello,

the component triggers an issue with IE11, because of the use of findIndex in components/VueTabs.js
There are a few workarounds : https://stackoverflow.com/questions/37698996/findindex-method-issue-with-internet-explorer

Can you fix this ? I can make a PR otherwise !
Thanks :)

Edit : also noticed 3 "+" signs here :

Just open the example and try to click on tab icon. The console.log will appear twice.
But it works fine when clicking on tab title.
https://jsfiddle.net/b44cc4dq/56/

I'm getting an 'invalid aria attribute' when I use an accessibility checker.

The tab ids, and corresponding aria attributes have spaces when my title has a space, eg. 'Second tab'. Ideally spaces should be stripped. Alternatively the user could be allowed to send in a prop to use for aria if this would be simpler to implement.

Input code:
<vue-tabs> <v-tab title="First tab"> <p>Lorem ipsum dolor </p> </v-tab> <v-tab title="Second tab"> <p>Quamquam te quidem video min</p> </v-tab> <v-tab title="Third tab"> <p>Quicquid porro animo cernimus, id omne oritur a sensibus; Quis ist</p> </v-tab> </vue-tabs>

Example in output code:

id="t-Second tab" aria-controls="p-Second tab" 

id="p-First tab" aria-labelledby="t-First tab"

The dynamic tabs demo at https://jsfiddle.net/b44cc4dq/245/ removes the first tab in the array instead of the correct one due to the missing 'index' in line 4 of the demo code.

<v-tab v-for="tab in tabs" :key="tab">

should read...

<v-tab v-for="(tab,index) in tabs" :key="tab">

have active-tab-color and active-text-color but i want active-border-color

Hi Dear, cool things,
but how to hide deactivate tab title and how to put tab at bottom for mobile browser like google+ navbar on mobile browser

ti-setting more icon.....

I keep getting a build error with building for prod (it worked fine for dev):

ERROR in ./node_modules/vue-nav-tabs/dist/vue-tabs.common.js
Module build failed: Error: Couldn't find preset "vue-app" relative to directory "D:\\REMOVED\\node_modules\\vue-nav-tabs"
    at D:\REMOVED\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19

I'm using it as instructed:

import VueNavTabs from 'vue-nav-tabs'
Vue.use(VueNavTabs)

I removed this from the package.json, and then the prod build worked fine:

  "babel": {
    "presets": [
      [
        "vue-app",
        {
          "useBuiltIns": true
        }
      ]
    ]
  },

Any better suggestions?

I'm using vuex. I need to change tab programmatically and with user actions (click on tab). Is possible trigger tab-change only for user actions and not when i change it programmatically?
Thanks

Is it possible to set the width of the tabs and tab-content?

When I am using vertical tabs, the tab width changes and depends on the width of the content in the tab-container area.

Thanks
Chris

If google maps is placed in another tab than first it has to be resized for showing
(according to this stackoverflow.com)

but if you use it with tab-change event it doesn't work

e.g:

methods: {
      handleTabChange(tabIndex, newTab, oldTab){
          window.google.maps.event.trigger(document.getElementById('regularMap'), 'resize')
      }
}

Hi,

What's the license for this project? It doesn't appear to be mentioned in the readme, docs, package.json etc.

Thanks.

In the absence of an icon, the layout looks weird and the text can not be centered.

https://github.com/cristijora/vue-tabs/blob/master/src/components/VueTabs.js#L116

Hi all !

On my project, i use vue-tabs (so simply to use) but i need more liberty to obtain my result.
vTab has only one property (title), can i propose a pull request to customize more vTab property ?

In fact, i need to specify a dynamic class or style to obtain the following render :
https://ufile.io/wys5y

I have a dynamic list, and need to calculate the width for each item.

<vue-tabs @tab-change="handleAnalyzeTabChange">
    <v-tab v-for="tabType in itemsType" :key="tabType" :title="tabType" :style="getAnalyzeTabTypeWidth(itemsType.length)">
       {{ tabType }}
    </v-tab>
</vue-tabs>

Could be pretty cool to accept style or class on vTab prop and maybe on vTabs container ?
Tell me what do you think about it ;)

Regards,

Dear,

v-for around v-tab doesn't keep the same sorting.
{1,2,3}
With v-for alone you got 1, 2 ,3
Combination v-for v-tab you got 2, 3, 1

I have made an example the problem should be more clear.
https://jsfiddle.net/b44cc4dq/2323/

Thank you in advance.

how can the theme be changed from the default one cannot seem to find how

Hello Cristi,

First of thank you for this great component, we are using your Vue Paper Dashboard Pro and making some customization. As you know Vue Tabs is in that theme, and we thought we can use this in our front page too and completed the design. But if we click on the tab, it jumps to the top. I looked at your demo and our admin pages, it doesn't jump all the time. Changing the # link to #/ fixes the problem, but couldn't fix it because I'm using your library as dependency, what do you think, how can I overcome this problem?

Regards.

Hello,

Id like to be able to add a badge to the tab content, for instance as seen in this PR: #38 you can add dynamic content to headers. Is there a way to be able to highlight that content in a badge?

Thanks!

Hi, how can I program a Back Button that takes me back to a specific Active Tab?

I use vue-router, could it be with router-link?

Is there any way to add a tab for displaying all, without repeating displaying content under different tabs