Built-in Components

@vuepress/theme-default

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

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.