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 SFC

Alternatively, you can use the custom containers.