vue-tribute

A Vue.js wrapper for Zurb's Tribute library for native @mentions.

Install

$ yarn add vue-tribute

or

$ npm install vue-tribute --save

or include the UMD build, hosted by unpkg in a <script> tag. You will also need to include the main Zurb Tribute library:

<script src="js/tribute.js"></script>
<script src="//unpkg.com/vue-tribute"></script>

Usage

Import and register the component.

import VueTribute from 'vue-tribute'

export default {
  ...
  components: {
    VueTribute
  }
}

In your template, wrap an input, textarea or contenteditable element in the vue-tribute component, and pass your Tribute options in.

<div>
  <vue-tribute :options="tributeOptions">
    <input type="text" placeholder="@..." />
  </vue-tribute>
</div>

See the available Tribute options here.

Events

Tribute broadcasts two events — a tribute-replaced event, and a tribute-no-match event (see docs here). For your convenience, whenever Tribute triggers these events, the vue-tribute component also emits these events.

License

MIT © Collin Henderson