Built-in Components

Badge badge

Props:
- type
  - Type: 'tip' | 'warning' | 'danger'
  - Default: 'tip'
- text
  - Type: string
  - Default: ''
- vertical
  - Type: 'top' | 'middle' | 'bottom' | undefined
  - Default: undefined
Example:

Input

- VuePress - <Badge type="tip" text="v2" vertical="top" />
- VuePress - <Badge type="warning" text="v2" vertical="middle" />
- VuePress - <Badge type="danger" text="v2" vertical="bottom" />

Output

VuePress - v2
VuePress - v2
VuePress - v2

CodeGroup

Details:
Wrapper of the CodeGroupItem components.

CodeGroupItem

Props:
- title
  - Type: string
  - Required: true
- active
  - Type: boolean
  - Default: false
Details:
This component must be placed inside a CodeGroup component.
Use the active prop to set the initial active item, or the first item will be activated by default.
Example:

Input

<CodeGroup>
  <CodeGroupItem title="pnpm">

```bash:no-line-numbers
pnpm install
```

  </CodeGroupItem>

  <CodeGroupItem title="yarn">

```bash:no-line-numbers
yarn install
```

  </CodeGroupItem>

  <CodeGroupItem title="npm" active>

```bash:no-line-numbers
npm install
```

  </CodeGroupItem>
</CodeGroup>

Output

pnpm install

yarn install

npm install

WARNING

You must add an empty line between the starting tag of <CodeGroupItem> and the code fence, otherwise the code fence will not be parsed correctly by Markdown.

All content must be valid Markdown first, and then a Vue SFC.

Learn more: Cookbook > Markdown and Vue SFCopen in new window

Alternatively, you can use the custom containers.