Not able to get Tabs to work

[davidkartuzinski]

First, thank you for your plugin. This will be very useful in our docs and I appreciate your time and efforts.

I am unable to get vuepress-plugin-tabs to work. I am currently running:

vuepress version: 0.14.9
vue tabs component version: 1.5.0
vuepress-plugin-tabs: 0.2.2

I searched everywhere for possible solutions.

Expected Behavior

I followed the instructions found in the Readme.md:

1. Installed it with NPM:

npm install vuepress-plugin-tabs vue-tabs-component

2. I enable plugin in .vuepress/config.js

My config file looks basically like this:

module.exports = {
  plugins: [ 
    "tabs",
      ],
  head: [
    ['link', { rel: 'icon', href: `/rocket.png` }],
    ['meta', { name: 'theme-color', content: color }],
    ['meta', { prefix: ogprefix, property: 'og:title', content: title }],
    ['meta', { prefix: ogprefix, property: 'twitter:title', content: title }],
    ['meta', { prefix: ogprefix, property: 'og:type', content: 'article' }],
    ['meta', { prefix: ogprefix, property: 'og:url', content: url }],
    [
      'meta',
      { prefix: ogprefix, property: 'og:description', content: description },
    ],

 ...
   
}

I then created an index.styl located in .vuepress/theme/styles/index.styl and inside this added the @require statement (it only has this line):

@require '~vuepress-plugin-tabs/dist/themes/default.styl'

I then required index.styl in my theme.styl, like so,

@require './index'
@require './config'
@require './nprogress'
@require './code'
@require './custom-blocks'
@require './arrow'
@require './wrapper'
@require './toc'

When I add this CSS style in both the index.styl or the node_modules/vuepress-plugin-tabs/dist/themes/default.styl files, it is being found.

html, body {
    color: red!important
}

Current Behavior

After following the above instructions, included restarting the server/app, I expect the tabs to appear when using the sample code provided.

Failure information

https://github.com/strapi/strapi is the project repo and specifically the /docs which is a Vuepress install.

The tabs are simply not being registered.

I tried also in a totally different Repo https://github.com/FriendlyUser/vuepress-theme-cool-starter - as well and could not get tabs to work.

I suspect I have fundamentally misunderstood something. I am not getting any errors in the console or page.

I am running Vuepress 0.14.9 and tried updating it to 0.14.10 to see if that helped, but still the tabs do not work.

Thank you.

[pskordilakis]

Hi David,
this package is for vuepress 1.x. For version 0.x you can use https://github.com/pskordilakis/vuepress-tabs. I created a different package when migrating the code to vuepress 1.x to follow the naming convention of the plugin system.

[davidkartuzinski]

Yes yes... that did it. I was able to easily get it working with the correct version. Thank you very much for your very fast response.