@Mention #Tag Component For Vue.js

A Twitter and Facebook inspired @mention users and #tag topics popper component for input and textarea elements.

How to use it:

1. Import the component.

import { Mentionable } from 'vue-mention'

2. Define the mentions and tags.

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'
}
]

3. Insert the component into your template.

<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>

export default {
  components: {
    Mentionable,
  },
  data () {
    return {
      text: '',
      items: [],
    }
  },
  methods: {
    onOpen (key) {
      this.items = key === '@' ? users : issues
    },
  },
}

4. All possible props.

keys: {
  type: Array,
  required: true,
},
placement: {
  type: String,
  default: 'top-start',
},
items: {
  type: Array,
  default: () => [],
},
omitKey: {
  type: Boolean,
  default: false,
},
filteringDisabled: {
  type: Boolean,
  default: false,
},
insertSpace: {
  type: Boolean,
  default: false,
},
mapInsert: {
  type: Function,
  default: null,
},
limit: {
  type: Number,
  default: 8,
},

Preview:

Changelog:

v1.1.0 (12/08/2021)

• add replaceWith param to apply event

v1.0.0 (12/28/2020)

• Fixed: disable popover when input is email & enale popover when previous input is space or new line
• Fixed: RegexError when typing special characters on mentioning
• Added ‘apply’ event
• Added close event and tests
• Support contenteditable
• Support wrapped input

Download Details:

Author: Akryum

Live Demo: https://vue-mention.netlify.app/

Download Link: https://github.com/Akryum/vue-mention/archive/master.zip

Official Website: https://github.com/Akryum/vue-mention

Install & Download: