Simplified bootstrap tabs

Last update: Aug 8, 2022
Comments
  • 1. Lazy rendering.

    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 ?

    Reviewed by vadimpopa at 2017-06-13 09:16
  • 2. Error js after build

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

    Reviewed by olive64 at 2017-05-09 13:41
  • 3. Issue when importing the style

    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

    Reviewed by kidii at 2017-10-31 18:00
  • 4. How to use it with vee-validate?

    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?

    Reviewed by afucher at 2017-05-31 05:26
  • 5. duplicate key in vue 2.5.13

    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

    Reviewed by nathansalwen at 2018-01-14 07:27
  • 6. Spaces affect the layout.

    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

    Reviewed by seekcx at 2017-08-22 07:16
  • 7. data can not loaded in mouted mothed.

    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?

    Reviewed by nonefirst at 2017-07-10 06:12
  • 8. Private path in dist file

    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.

    Reviewed by MekDrop at 2017-07-03 08:13
  • 9. Tab data

    Problem: Adding dynamic information into the title of a tab is currently restricted to binding on the title or icon properties. In the case that a dynamic label/badge (e.g. showing a count) is also desired then the title slot can be used, but binding there is only updated on refresh (i.e. switching tabs).

    To allow changes in the underlying data to properly propagate down through to the title slot template we need to use a scoped slot.

    This PR adds the ability to bind arbitrary data to a tab that can be used in the title slot template. It includes some information available when generating the simple title, and is backwards compatible.

    Example on JSFiddle: https://jsfiddle.net/waoa7s60/17/

    Reviewed by drjonnicholson at 2018-03-07 22:57
  • 10. Enhancement tab-change event

    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.

    Reviewed by kikoseijo at 2017-12-08 01:33
  • 11. Label a with href scrolls the page up.

    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.

    Reviewed by felocru at 2017-12-04 21:09
  • 12. isValidParent() doesnt has effect in production build with minimize & typesctipt & class component

    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

    Reviewed by SSmJaE at 2021-04-10 04:17
  • 13. Getting Vue warn in console when try example from Project page

    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>
    
    Reviewed by biopowder at 2020-11-26 13:46
  • 14. Error in production using Nuxt | Heroku

    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)
    
    Reviewed by juniorgarcia at 2020-09-28 20:24
  • 15. Emit event when new tab is added.

    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

    Reviewed by fatse at 2020-07-12 05:50
An easy way to display tabs with Vue

?? THIS PACKAGE HAS BEEN ABANDONED ?? We don't use this package anymore in our own projects and cannot justify the time needed to maintain it anymore.

Aug 9, 2022
Simple Vue 2 component, that allows you to make tabs with moving bottom line

Vue-tabs-with-active-line Simple Vue 2 component, that allows you to make tabs with moving bottom line Demo and example Live demo to play with: Demo-l

May 2, 2022
Vuex state persistance and synchronization between tabs/windows.

vuex-basement Vuex state persistance and synchronization between tabs/windows. Tested to work with Vue2. One Shortcomming (please read before use). Th

Jun 29, 2022
Share vuex mutations between tabs/windows

vuex-shared-mutations Share certain Vuex mutations across multiple tabs/windows. Basic example Nuxt example Installation $ npm install vuex-shared-mut

Aug 3, 2022
πŸ’ΎπŸ”—πŸ–₯️ Share, synchronize and persist state between multiple tabs with this plugin for Vuex. TypeScript types included.
πŸ’ΎπŸ”—πŸ–₯️ Share, synchronize and persist state between multiple tabs  with this plugin for Vuex. TypeScript types included.

vuex-multi-tab-state This Vuex plugin allows you to sync and share the status of your Vue application across multiple tabs or windows using the local

Aug 12, 2022
A flexible tabs-component for Vue

vue-magic-line A tabs-component for Vue. Demo You can find some examples here Configuration Install component Globally import VueMagicLine from 'vue-m

Mar 18, 2022
Vue.js tabs component based in material design

Vue.js tabs component based in material design

Mar 31, 2022
A Lightweight and flexible underlined tabs component for VueJS ⚑

Vue-Tabz A Lightweight and flexible underlined tabs component for VueJS ⚑ Demo Live Demo Installing npm install --save vue-tabz Installation & Usage i

May 21, 2022
A tabs field for the panel, to use with $field->when() conditions.
A tabs field for the panel, to use with $field->when() conditions.

Kirby TabsField plugin A tabs field for the panel, to use with $field->when() conditions. Features: Remembers the last open tab. The field value is ne

Mar 7, 2022
Lightweight and flexible tabs component for the web.

Tabs Lightweight and flexible tabs component for the web. Packages Package Version tabs vue-tabs vue-tabs-example Vue.js example react-tabs react-tabs

Jul 13, 2022
A custom Vue tabs component.

cocoda-vue-tabscocoda-vue-tabs A custom Vue tabs component. Note: This is in early development and things might change drastically in the future. Also

Oct 12, 2021
Event-Based communication across opened tabs for Vue 2.x
Event-Based communication across opened tabs for Vue 2.x

vue-tabevents Easy communication between tabs for Vue 2.x Getting Started Installing Install with npm: npm install --save vue-tabevents import into pr

Jul 2, 2022
Vue3-dynamic-tabs - A Vue component to easily render tabs dynamically

A Vue component to easily render tabs dynamically The package contains a Vue 3 c

Apr 1, 2022
A more simplified rendition of my own kanban board, which i use to track stuff when i'm working on something
 A more simplified rendition of my own kanban board, which i use to track stuff when i'm working on something

My Kanban Board A more simplified rendition of my own kanban board, which i use to track stuff when i'm working on something . Tech used in the making

Jun 1, 2022
Vue Light Bootstrap Dashboard - FREE BOOTSTRAP 4 VUEJS ADMIN TEMPLATE
Vue Light Bootstrap Dashboard - FREE BOOTSTRAP 4 VUEJS ADMIN TEMPLATE

Vue Light Bootstrap Dashboard Admin dashboard based on light bootstrap dashboard UI template + vue-router This project is a vue version of Light boots

Aug 12, 2022
Nuxt + CoreUI Free Vue Bootstrap Admin TemplateNuxt + CoreUI Free Vue Bootstrap Admin Template
Nuxt + CoreUI Free Vue Bootstrap Admin TemplateNuxt + CoreUI Free Vue Bootstrap Admin Template

Nuxt + CoreUI Free Vue Bootstrap Admin Template Nuxt + CoreUI Free Vue Bootstrap Admin Template Description Nuxt + CoreUI Free Vue Bootstrap Admin Tem

Apr 29, 2022
Nuxt + CoreUI Free Vue Bootstrap Admin TemplateNuxt + CoreUI Free Vue Bootstrap Admin Template
Nuxt + CoreUI Free Vue Bootstrap Admin TemplateNuxt + CoreUI Free Vue Bootstrap Admin Template

Nuxt + CoreUI Free Vue Bootstrap Admin Template Nuxt + CoreUI Free Vue Bootstrap Admin Template Description Nuxt + CoreUI Free Vue Bootstrap Admin Tem

Apr 29, 2022
A Bootstrap Vue editable table for editing cells using built-in Bootstrap form elements
A Bootstrap Vue editable table for editing cells using built-in Bootstrap form elements

BootstrapVue Editable Table NOTE: Starting from version 0.1.2-beta.4, a unique id for every row is required. Demo: Edit Cell | Edit Row | Add, Update

Jul 12, 2022
✨ A Chrome extension for tidying up those tabs.
✨ A Chrome extension for tidying up those tabs.

TidyTab Tired of keeping your browser open just to keep your tabs open and not lose them? Well, tidy them up using TidyTab and free up your computer's

Jun 9, 2022