Mention popper for input and textarea
Install the v2 for Vue 3 support:
pnpm i vue-mention@next You also need to install floating-vue:
pnpm i floating-vue And add the default floating-vue styles:
import 'floating-vue/dist/style.css'Install the special version for floating-vue v1 (for Vue 2) support:
pnpm i vue-mention@1.0.0-floating-vue1 1.0.0-floating-vue1 otherwise you'll install v1.1.0 which is for v-tooltip 2.
You also need to install floating-vue v1:
pnpm i floating-vue@vue2 And add the default floating-vue styles:
import 'floating-vue/dist/style.css' 
<script> import { Mentionable } from 'vue-mention' const users = [ { value: 'akryum', firstName: 'Guillaume', }, { value: 'posva', firstName: 'Eduardo', }, { value: 'atinux', firstName: 'Sébastien', }, ] const issues = [ { value: 123, label: 'Error with foo bar', searchText: 'foo bar' }, { value: 42, label: 'Cannot read line', searchText: 'foo bar line' }, { value: 77, label: 'I have a feature suggestion', searchText: 'feature' } ] export default { components: { Mentionable, }, data () { return { text: '', items: [], } }, methods: { onOpen (key) { this.items = key === '@' ? users : issues }, }, } </script> <template> <Mentionable :keys="['@', '#']" :items="items" offset="6" insert-space @open="onOpen" > <textarea v-model="text" /> <template #no-result> <div class="dim"> No result </div> </template> <template #item-@="{ item }"> <div class="user"> {{ item.value }} <span class="dim"> ({{ item.firstName }}) </span> </div> </template> <template #item-#="{ item }"> <div class="issue"> <span class="number"> #{{ item.value }} </span> <span class="dim"> {{ item.label }} </span> </div> </template> </Mentionable> </template>