Vuejs-Vue tabs v0.5.7: vue-tabs - Simple tabs and pills.

icon
Latest Release: v0.5.7

Patches

  • Added tabData propety that can be passed to the title: 0952d7df5e07e4890162c12d01518659466162be
  • Remove type constraint: 1607e866183b9ca7a7ca073ad5e2d1a8982fc9fd
  • Fix for undefined oldIndex when using dynamic tabs reset.: af8959ee5ccedeb175e614be7cb143609919110d
Source code(tar.gz)
Source code(zip)

Vue-tabs

Simplified, customizable bootstrap based tabs Vue-tabs is a tab component which simplifies the usage of tabs and their customization

Demos

Theming

Vue-tabs supports 3 different themes by default:

Documentation

Comments

  • Cannot read property 'disabled' of undefined
    Cannot read property 'disabled' of undefined

    May 15, 2019

    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)
    
    Reply
  • npm run deploy error
    npm run deploy error

    Jun 3, 2019

    "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 ]

    Reply
  • Fix VueTabs.js error where it tries to activate non existent tab
    Fix VueTabs.js error where it tries to activate non existent tab

    Nov 8, 2019

    fix issue where new tab list length is less then activeTabIndex for more then 1 which leads to an error as its trying to activate non existent tab

    Reply
  • Support tooltip integration
    Support tooltip integration

    Apr 21, 2020

    There is no way to add tooltip on hover, e.g. using other directives like v-tooltip, or just using default HTML title attribute.

    Reply
  • chore: validator textPosition
    chore: validator textPosition

    May 25, 2020

    use validator for props

    Reply
  • chore: validator tab type
    chore: validator tab type

    May 25, 2020

    use validator for tab type

    Reply
  • Emit event when new tab is added.
    Emit event when new tab is added.

    Jul 12, 2020

    Hi, I'm using vue-tabs in a project where tabs can be dynamically added by the user. I have a need to perform an action whenever a new tab is added, so I had to add this event to your great library. I hope you'll consider it useful for the project and other people.

    Thanks, Fatime

    Reply
  • Error in production using Nuxt | Heroku
    Error in production using Nuxt | Heroku

    Sep 28, 2020

    I got an error while in production (on Heroku) due babel-helper-vue-jsx-merge-props which is required by this component, but not declared in dependencies on package.json. Since Heroku removes the devDependencies, this triggers this error.

    Here is the line requiring this dependency.

    Info:

    |Tool|Version| |-----|-----| |Node|v14.11.0| |NPM|6.14.8| |Yarn|1.22.5| |Nuxt|2.14.5|

    The log:

    2020-09-28T19:47:31.420039+00:00 app[web.1]: 
    2020-09-28T19:47:31.420058+00:00 app[web.1]: ERROR  Cannot find module 'babel-helper-vue-jsx-merge-props'
    2020-09-28T19:47:31.420059+00:00 app[web.1]: Require stack:
    2020-09-28T19:47:31.420059+00:00 app[web.1]: - /app/node_modules/vue-nav-tabs/dist/vue-tabs.common.js
    2020-09-28T19:47:31.420060+00:00 app[web.1]: - /app/node_modules/vue-server-renderer/build.prod.js
    2020-09-28T19:47:31.420060+00:00 app[web.1]: - /app/node_modules/vue-server-renderer/index.js
    2020-09-28T19:47:31.420060+00:00 app[web.1]: - /app/node_modules/@nuxt/vue-renderer/dist/vue-renderer.js
    2020-09-28T19:47:31.420061+00:00 app[web.1]: - /app/node_modules/@nuxt/server/dist/server.js
    2020-09-28T19:47:31.420061+00:00 app[web.1]: - /app/node_modules/@nuxt/core/dist/core.js
    2020-09-28T19:47:31.420062+00:00 app[web.1]: - /app/node_modules/@nuxt/cli/dist/cli-index.js
    2020-09-28T19:47:31.420062+00:00 app[web.1]: - /app/node_modules/@nuxt/cli/dist/cli.js
    2020-09-28T19:47:31.420062+00:00 app[web.1]: - /app/node_modules/nuxt/bin/nuxt.js
    2020-09-28T19:47:31.420062+00:00 app[web.1]: 
    2020-09-28T19:47:31.420063+00:00 app[web.1]: Require stack:
    2020-09-28T19:47:31.420063+00:00 app[web.1]: - node_modules/vue-nav-tabs/dist/vue-tabs.common.js
    2020-09-28T19:47:31.420064+00:00 app[web.1]: - node_modules/vue-server-renderer/build.prod.js
    2020-09-28T19:47:31.420064+00:00 app[web.1]: - node_modules/vue-server-renderer/index.js
    2020-09-28T19:47:31.420064+00:00 app[web.1]: - node_modules/@nuxt/vue-renderer/dist/vue-renderer.js
    2020-09-28T19:47:31.420065+00:00 app[web.1]: - node_modules/@nuxt/server/dist/server.js
    2020-09-28T19:47:31.420065+00:00 app[web.1]: - node_modules/@nuxt/core/dist/core.js
    2020-09-28T19:47:31.420065+00:00 app[web.1]: - node_modules/@nuxt/cli/dist/cli-index.js
    2020-09-28T19:47:31.420065+00:00 app[web.1]: - node_modules/@nuxt/cli/dist/cli.js
    2020-09-28T19:47:31.420066+00:00 app[web.1]: - node_modules/nuxt/bin/nuxt.js
    2020-09-28T19:47:31.420067+00:00 app[web.1]: at Function.Module._resolveFilename (internal/modules/cjs/loader.js:893:15)
    2020-09-28T19:47:31.420067+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:743:27)
    2020-09-28T19:47:31.420068+00:00 app[web.1]: at Module.require (internal/modules/cjs/loader.js:965:19)
    2020-09-28T19:47:31.420068+00:00 app[web.1]: at require (internal/modules/cjs/helpers.js:88:18)
    2020-09-28T19:47:31.420069+00:00 app[web.1]: at Object.<anonymous> (node_modules/vue-nav-tabs/dist/vue-tabs.common.js:12:38)
    2020-09-28T19:47:31.420070+00:00 app[web.1]: at Module._compile (internal/modules/cjs/loader.js:1076:30)
    2020-09-28T19:47:31.420070+00:00 app[web.1]: at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    2020-09-28T19:47:31.420070+00:00 app[web.1]: at Module.load (internal/modules/cjs/loader.js:941:32)
    2020-09-28T19:47:31.420071+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:782:14)
    2020-09-28T19:47:31.420071+00:00 app[web.1]: at Module.require (internal/modules/cjs/loader.js:965:19)
    
    Reply
  • Getting Vue warn in console when try example from Project page
    Getting Vue warn in console when try example from Project page

    Nov 26, 2020

    Got errors in console:

    found in

    ---> at resources/js/Layouts/AppLayout.vue at resources/js/Pages/Dashboard.vue

    1. Method "route" has already been defined as a prop.

    2. Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "route"

    import {VueTabs, VTab} from 'vue-nav-tabs/dist/vue-tabs.js'

    components: {
        VueTabs,
        VTab
    },
    
                        <vue-tabs>
                            <v-tab title="First tab">
                                First tab content
                            </v-tab>
    
                            <v-tab title="Second tab">
                                Second tab content
                            </v-tab>
    
                            <v-tab title="Third tab">
                                Third tab content
                            </v-tab>
                        </vue-tabs>
    
    Reply
  •  isValidParent() doesnt has effect in production build with minimize & typesctipt & class component
    isValidParent() doesnt has effect in production build with minimize & typesctipt & class component

    Apr 10, 2021

    hi, I found a bug that in VTab, if you use isValidParent to validate the parent component is VueTabs after minimizing, because, in vue class component, the class name is set to vue component name, but after minimize, the class name may be modified, so

    isValidParent () {
        return this.$parent.$options.name === 'vue-tabs'
    },
    

    does not has the effect, it will show an empty page. there is a workaround that uses provide and inject, which can avoid this problem, just like what element UI has done https://github.com/ElemeFE/element/blob/dev/packages/tabs/src/tab-bar.vue

    Reply
  • Private path in dist file
    Private path in dist file

    Jul 3, 2017

    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.

    bug enhancement 
    Reply
  • [fix] tab link break routes
    [fix] tab link break routes

    Dec 1, 2017

    If you use hash based routes the link on each tab will break the routing, this can be easily fixed with preventing the event to be executed.

    Reply
  • duplicate key in vue 2.5.13
    duplicate key in vue 2.5.13

    Jan 14, 2018

    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

    Reply
  • Tab link breaks hash based navigation
    Tab link breaks hash based navigation

    Dec 3, 2017

    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.

    Reply
  • how to control tabs switching
    how to control tabs switching

    May 30, 2017

    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

    enhancement 
    Reply
  • This doesn't support disabling tabs?
    This doesn't support disabling tabs?

    Sep 4, 2017

                                                                                                                                                                                                           
    Reply
  • Issue when importing the style
    Issue when importing the style

    Oct 31, 2017

    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

    Reply
  • How to use it with vee-validate?
    How to use it with vee-validate?

    May 31, 2017

    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?

    question 
    Reply
  • Error js after build
    Error js after build

    May 9, 2017

    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})}])}

    Reply
  • Lazy rendering.
    Lazy rendering.

    Jun 13, 2017

    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 ?

    question 
    Reply