vue-tribute

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

Install

$ npm install vue-tribute --save

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

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

Usage

import Vue from "vue";
import VueTribute from "vue-tribute";

Vue.use(VueTribute, options);

The options parameter is optional.

...and inside your template, bind a dynamic values parameter to some data:

<input type='text' :values='items' v-tribute />

The values array should be an array of objects that contain a key and value like so:

[
  {key: "Phil Heartman", value: "pheartman"},
  {key: "Gordon Ramsey", value: "gramsey"}
]

You can modify this structure using the built-in Tribute options.

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, vue-tribute also emits these events from the Vue instance the bound element is attached to.

License

MIT © Collin Henderson