Not able to get Tabs to work
Closed this issue · 2 comments
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
:
- Installed it with NPM:
npm install vuepress-plugin-tabs vue-tabs-component
- 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.
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.
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.