vue-tribute

Basic Example

With a Textarea

With contenteditable

Install

$ npm install tributejs vue-tribute@next --save
# or...
$ yarn add tributejs vue-tribute@next

Add the Plugin

import { createApp } from 'vue'
import App from './App.vue'
import VueTribute from 'vue-tribute'

createApp(App).use(VueTribute).mount("#app")

import { VueTribute } from 'vue-tribute'

export default {
  components: { VueTribute },
  setup() {
    ...
  },
}

Usage

Wrap a single text input, textarea, or contenteditable element within the VueTribute component. You should then pass a valid Tribute collection(s) object to the component.

<template>
  <vue-tribute :options="options">
    <input type="text" placeholder="@..." />
  </vue-tribute>
</template>
<script setup>
import { VueTribute } from 'vue-tribute'

const options = {
  trigger: '@',
  values: [
    { key: 'Sarah Drasner', value: 'sarah_edo' },
    { key: 'Evan You', value: 'youyuxi' },
    { key: 'Adam Wathan', value: 'adamwathan' },
    { key: 'Rich Harris', value: 'Rich_Harris' },
  ],
}
</script>