Consider to switch to maintained version of vue tabs

[timaschew]

Currently the component for tabs is abandon: https://github.com/spatie/vue-tabs-component

And it's broken if you use 2 tabs with the same name. You're doing it right and passing a name attribute which doesn't need to be unique. But the tab component is converting it into a id.

So it's not proper HTML, but more important if you rely on the built-in deeplink mechanism it doesn't work anymore, since it picks just the first occurrence of the id.

So solve this there are two solutions:

1. generate a random or unique enough id in this plugin
2. switch to a fork for the tab component and apply these changes:
   • use name instead of id
   • hardcode hash attribute to javascript:; because '#' doesn't work (all tabs are enabled otherwise at the same time)
   • remove localStorage, it doesn't work anymore. Change the tab refreshing twice brings different results

[pskordilakis]

Tried to solve it with the first approach, but instead of a random id I keep track of the ids used and add a suffix with the count (idValue-count).

The logic is that always an id attribute is passed to the tab component, so it does not use the name attribute as the id. I still use the name value if the id is not passed but adding a suffix to make it unique.

This behaviour is not enabled by default but it can be enabled by passing an option when registering the plugin

plugins: [
      [  'tabs',  { dedupeIds: true }  ]
]

Just released a patch version, can you try it and confirm if it solves the problem.

vue-tabs-component being abandoned is a problem and should be replaced, I will start working on it in the next days.

[timaschew]

Cool, thanks! I will try it out in the next days.

Actually I didn't see that you can pass useUrlFragment earlier, so that would solve my problem with the routes.

Another though: Even if the ids are fixed it would be nice to still have some sync available. So if you have lot of code snippets with tabs you probably don't want to switch in every code snippet the tab.

Here is a demo: https://jhildenbiddle.github.io/docsify-tabs/#/?id=sync

We could use the title to sync the tabs. But I guess this require also code changes in the vue-tabs-component. To be clear, I suggest to provide this functionality with disabled useUrlFragment.

IMHO using useUrlFragment is really bad UX. If you want to go back (browser back) you need to go back all your tabs history.

[timaschew]

I've installed the latest version (0.2.2) and using this config

 "plugins": [
    [
      "tabs",
      {
        "dedupeIds": true
      }
    ],
    require('../../vuepress-plugins/public-files')
  ],

But it doesn't work. This ids are still not not unique (like before).

I've tried to debug it. I've added this line

console.log('>>>>>>>>>>> options', options)

to this file: vuepress-plugin-tabs.cjs.js But I didn't see any output, neither in the terminal nor in the browser. I've truncated the file and then the tabs didn't work.

Using the --debug option for vuepress it shows me this:

...
debug Plugins defined at @vuepress/internal-site-config [ [ 'tabs', { dedupeIds: true } ], [Function] ]
...
tip Apply plugin tabs (i.e. "vuepress-plugin-tabs") ...

[pskordilakis]

Just tried the upgrade on a new installation and seems to be working. Do you use any other plugin that I should try with?

To develop the plugin I use the yarn link functionality, running yarn dev on the project so vuepress-plugin-tabs.cjs.js is automatically build. In the vuepress installation for the updates to take effect I have to restart the vuepress dev server and also save the markdown file to cause a rebuild of the assets. I am not sure if it is the link functionality or the build process of vuepress that causes the updates not to be applied immediately.

[timaschew]

Okay, just tested on another project, it's working fine there: https://hungry-yonath-bfd0a1.netlify.com/#first-header

In my real project I just have another plugin I will try to turn it off tomorrow.