Does not work with Vuetify.

[MicroDreamIT]

Hello I have been google a lot to integrate this with Vuetify. But very much bad luck that I am still failed to manage.

[kiranparajuli589]

It worked for me. I'm using

"vue": "^2.6.11",
"v-tooltip": "^2.0.0",
"vue-mention": "^1.1.0",

Do not use the latest version of v-tooltip here. see #60

and inside the component

<template>
  <div>
    <Mentionable
        :keys="['@']"
        :items="mentionList"
        offset="60"
    >
        <v-textarea
          :id="`comment-input-${this.publication.id}`"
          outlined hide-details="auto"
          v-model="comment" name="comment"
          prepend-inner-icon="mdi-comment-outline"
          placeholder="Give your thoughts..."
          @change="$emit('change', $event)"
          @keyup="$emit('keyup', $event)"
          @input="$emit('input', $event)"
          @focus="pickerColor = 'primary'"
          @blur="pickerColor = 'grey'" class="full-width"
          :error-messages="formErrors['comment']"
          autofocus
        />
        <template #no-result>
        <div class="dim">
              Hmm...no peoples to mention.
        </div>
        </template>
        
        <template #item-@="{ item }">
            <div class="user">
	        {{ item.value }}
	        <span class="dim">
		        ({{ item.name }})
	        </span>
            </div>
        </template>
        
        <template #item-#="{ item }">
          <div class="issue">
	      <span class="number">
		      #{{ item.value }}
	      </span>
	      <span class="dim">
		      {{ item.label }}
	      </span>
          </div>
        </template>
    </Mentionable>
    <v-fab-transition>
	<v-btn color="primary"
            class="mt-2" v-if="comment"
            @click="addComment"
	>
          Add Comment
	</v-btn>
    </v-fab-transition>
  </div>
</template>

No other configurations are required.

See my Pr here https://github.com/word-club/web/pull/13/files for adding vue mention in a comment field.