@skyastrall/mentions-vue

Multi-trigger inline suggestions for Vue 3. Drop-in component, compound components, or composable.

Docs · Playground · GitHub

Install

npm install @skyastrall/mentions-vue

Requires vue >= 3.4.

Quick Start

<script setup>
import { ref } from "vue";
import { Mentions } from "@skyastrall/mentions-vue";

const users = [{ id: "1", label: "Alice" }, { id: "2", label: "Bob" }];
const tags = [{ id: "t1", label: "design" }, { id: "t2", label: "bug" }];
const commands = [{ id: "c1", label: "summarize" }];

const markup = ref("");
</script>

<template>
  <Mentions
    :triggers="[
      { char: '@', data: users, color: 'rgba(99,102,241,0.25)' },
      { char: '#', data: tags, color: 'rgba(16,185,129,0.25)' },
      { char: '/', data: commands, color: 'rgba(245,158,11,0.25)' },
    ]"
    v-model="markup"
  />
</template>

Features

• Multi-trigger (@mentions, #tags, /commands)
• Per-trigger highlight colors
• Ghost text / AI completions
• Async data with loading states
• Single-line mode
• Full ARIA keyboard navigation
• Controlled and uncontrolled modes
• ~4 KB minified + gzipped (~6 KB core)

API Layers

1. <Mentions> — drop-in, works out of the box
2. Compound components — MentionsEditor, MentionsPortal, MentionsList, MentionsItem, MentionsEmpty, MentionsLoading
3. useMentions() — composable, full control

See the full documentation for API reference and guides.

License

MIT — Built by SkyAstrall