Tabs, inspired by Vuepress Theme Hope.

NOTE

Different from Vuepress Theme Hope, tab id's choice will NOT be stored and persisted.

---

Enable Tabs

For enable tabs, you should edit config file first:

.vitepress/config.ts

export default defineConfig<ThemeConfig>({
  // ...
  themeConfig: {
    markdown: {
      tabs: true
    }
  }
})

A Tab Group

Raw

::: tabs

@tab apple

An apple.

@tab banana

A banana.

:::

apple

An apple.

banana

A banana.

The default Tab

Raw

::: tabs

@tab Rust

Rust is shown only when a reader picks it.

@tab:active Go

Go is the default here, because its marker says so.

:::

@tab:active marks the Tab a group opens on. A group that marks none opens on its first.

Rust

Rust is shown only when a reader picks it.

Go

Go is the default here, because its marker says so.

Titles are Markdown

Raw

::: tabs

@tab `pnpm`

```bash [pnpm]
pnpm add vitepress-theme-vuejsblog
```

@tab **npm**

```bash [npm]
npm i vitepress-theme-vuejsblog
```

:::

A title is rendered as inline Markdown, so it can carry code, emphasis or a link to the guide.

pnpm

pnpm

pnpm add vitepress-theme-vuejsblog

npm

npm

npm i vitepress-theme-vuejsblog

Linking Tab Groups

Tab Groups that state the same Tab Id show the same choice: pick one below and the other group follows, by value rather than by position — which is what the #value suffix is for.

The package manager this repository uses:

Raw

::: tabs#package-manager

@tab npm

npm ships with Node.

@tab pnpm

pnpm is what this repository is developed with.

:::

Installing the Theme with it:

::: tabs#package-manager

@tab Using npm#npm

```bash [npm]
npm i vitepress-theme-vuejsblog
```

@tab Using pnpm#pnpm

```bash [pnpm]
pnpm add vitepress-theme-vuejsblog
```

:::

npm

npm ships with Node.

pnpm

pnpm is what this repository is developed with.

Installing the Theme with it:

Using npm

npm

npm i vitepress-theme-vuejsblog

Using pnpm

pnpm

pnpm add vitepress-theme-vuejsblog

A Tab's Value

#value also names a Tab for its own content, which reads it as value — along with isActive, so a pane can say something about itself:

Raw

::: tabs

@tab Shown#shown

This pane reads `value` as `{{ value }}` and `isActive` as `{{ isActive }}`.

@tab Hidden#hidden

This pane reads `value` as `{{ value }}` and `isActive` as `{{ isActive }}`.

:::

Shown

This pane reads value as shown and isActive as true.

Hidden

This pane reads value as hidden and isActive as false.

Markdown works inside a pane, including callouts and Vue expressions:

Raw

::: tabs

@tab A callout

> [!TIP]
> A pane is ordinary Markdown.

@tab Vue

Two plus two is {{ 2 + 2 }}.

:::

A callout

TIP

A pane is ordinary Markdown.

Vue

Two plus two is 4.