> ## Documentation Index
> Fetch the complete documentation index at: https://vuemail.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Slash Commands

> Add a command menu for inserting content blocks.

## Quick start

Add `SlashCommand` with the default command set:

```vue theme={null}
<script setup lang="ts">
import { EditorProvider } from '@vuemaildev/editor';
import { StarterKit } from '@vuemaildev/editor/extensions';
import { defaultSlashCommands, SlashCommand } from '@vuemaildev/editor/ui';
import '@vuemaildev/editor/themes/default.css';

const extensions = [StarterKit];
</script>

<template>
  <EditorProvider :extensions="extensions" :content="content">
    <SlashCommand :items="defaultSlashCommands" />
  </EditorProvider>
</template>
```

Type `/` in the editor to open the command menu. Use arrow keys to navigate and Enter to select.

> [!TIP]
>
> Even though you can [add custom commands](#adding-custom-commands) and style
> them that way, the default can also be styled using \
> &#x20;[CSS variables and `data-re-*` selectors](https://vuemail.dev/docs/editor/features/styling#slash-command).

## Default commands

The `defaultSlashCommands` array includes these built-in commands:

| Command | Category | Description |
| - | - | - |
| `TEXT` | Text | Plain text block |
| `H1` | Text | Large heading |
| `H2` | Text | Medium heading |
| `H3` | Text | Small heading |
| `BULLET_LIST` | Text | Unordered list |
| `NUMBERED_LIST` | Text | Ordered list |
| `QUOTE` | Text | Block quote |
| `CODE` | Text | Code snippet |
| `BUTTON` | Layout | Clickable button |
| `DIVIDER` | Layout | Horizontal separator |
| `SECTION` | Layout | Content section |
| `TWO_COLUMNS` | Layout | Two column layout |
| `THREE_COLUMNS` | Layout | Three column layout |
| `FOUR_COLUMNS` | Layout | Four column layout |

Each command is also exported individually, so you can cherry-pick:

```vue theme={null}
<script setup lang="ts">
import { BUTTON, H1, H2, SlashCommand, TEXT } from '@vuemaildev/editor/ui';
</script>

<template>
  <SlashCommand :items="[TEXT, H1, H2, BUTTON]" />
</template>
```

## Adding custom commands

Create a `SlashCommandItem` and include it in the items array. Its `icon` is an element, created with `h()`, or a component:

```vue theme={null}
<script setup lang="ts">
import { EditorProvider } from '@vuemaildev/editor';
import { StarterKit } from '@vuemaildev/editor/extensions';
import {
  defaultSlashCommands,
  SlashCommand,
  type SlashCommandItem,
} from '@vuemaildev/editor/ui';
import { Star } from 'lucide-vue-next';
import { h } from 'vue';

const extensions = [StarterKit];

const GREETING: SlashCommandItem = {
  title: 'Greeting',
  description: 'Insert a greeting block',
  icon: h(Star, { size: 20 }),
  category: 'Custom',
  searchTerms: ['hello', 'greeting', 'welcome'],
  command: ({ editor, range }) => {
    editor
      .chain()
      .focus()
      .deleteRange(range)
      .insertContent({
        type: 'paragraph',
        content: [{ type: 'text', text: 'Hello! Welcome to our newsletter.' }],
      })
      .run();
  },
};
</script>

<template>
  <EditorProvider :extensions="extensions" :content="content">
    <SlashCommand :items="[...defaultSlashCommands, GREETING]" />
  </EditorProvider>
</template>
```

The `SlashCommandItem` interface:

**title** `string` *required*

Display name shown in the command list.

**description** `string` *required*

Help text shown below the title.

**icon** `VNodeChild | Component` *required*

Icon displayed next to the command, like `h(Star, { size: 20 })`, or a component.

**category** `string` *required*

Category for grouping commands in the list.

**searchTerms** `string[]`

Additional terms for fuzzy search matching.

**command** `(props: \{ editor, range \}) =\> void` *required*

Function called when the command is selected. Receives the editor instance and the range to replace.

## Using individual commands

You can cherry-pick from the default commands to show only specific options:

```vue theme={null}
<script setup lang="ts">
import { BUTTON, SlashCommand } from '@vuemaildev/editor/ui';
</script>

<template>
  <SlashCommand :items="[BUTTON]" />
</template>
```

This is useful when you want a minimal command palette. For example, only allowing button insertion.

## Controlling visibility

**char** `string` (default: /)

Character that triggers the command menu.

**allow** `(props: \{ editor \}) =\> boolean`

Function to control when the command menu can appear. Return `false` to prevent it.

```vue theme={null}
<SlashCommand
  :items="defaultSlashCommands"
  char="/"
  :allow="({ editor }) => !editor.isActive('codeBlock')"
/>
```

## Examples

See slash commands in action with a runnable example:

> **[Slash Commands](https://vuemail.dev/editor/slash-commands)**
>
> Default commands plus a custom Greeting command.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.