Tabs

Less than 1 minute

Let the Markdown file in your VuePress site support tabs.

Settings

import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        tabs: true,
      },
    },
  }),
});

import { hopeTheme } from "vuepress-theme-hope";

export default {
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        tabs: true,
      },
    },
  }),
};

Usage

You need to wrap your tabs in tabs container.

You can add an id suffix in tabs container, which will be used as tab id. All tabs with same id will share same switch event.

::: tabs#fruit

<!-- here, fruit will be used as id, it's optional -->

<!-- tabs content -->

:::

Inside this container, you should use @tab marker to mark and separate tab contents.

Behind @tab marker, you can add text :active to activate the tab by default, and the text will be resolved as tab title.

::: tabs

@tab title 1

<!-- tab 1 content -->

@tab title 2

<!-- tab 2 content -->

@tab:active title 3

<!-- tab 3 will be activated by default -->

<!-- tab 3 content -->

:::

By default, the title will be used as value of tab, but you can override it using id suffix.

::: tabs

@tab title 1

<!-- here, tab 1's title "title 1" will be used as value. -->

<!-- tab 1 content -->

@tab title 2#value2

<!-- here, tab 2's title will be "title 2", but it will bind a value with "value2" -->

<!-- tab 2 content -->

:::

You can use Vue syntax and components in each tab, and you can access value and isActive, indicating the tab's binding value and whether the tab is active.

Switching together and persisting choice

If you want to make some tab groups switch together, you can use same tab id to bind them.

Also, your choice with that tab id will be stored and persisted.

Here is an example:

Choose a package manager:

npm

npm should be installed with Node.js.

pnpm

corepack enable
corepack use pnpm@8

Install vuepress-plugin-md-enhance:

Using npm

npm i -D vuepress-plugin-md-enhance

Using pnpm

pnpm add -D vuepress-plugin-md-enhance

Demo

A tab of fruit:

apple

Apple

banana

Banana

Another tab of fruit:

apple

Apple

banana

Banana

orange

Orange

A tab of fruit without id:

apple

Apple

banana

Banana

orange

Orange

A tab of fruit:

::: tabs#fruit

@tab apple#apple

Apple

@tab banana#banana

Banana

:::

Another tab of fruit:

::: tabs#fruit

@tab apple

Apple

@tab banana

Banana

@tab orange

Orange

:::

A tab of fruit without id:

::: tabs

@tab apple

Apple

@tab banana

Banana

@tab orange

Orange

:::