vue-v-tribute

vue wrapper for tributejs (https://github.com/zurb/tribute)

Setup

npm i vue-v-tribute

Provide default tributejs options for Vue Plugin

You can provide any option supported by tributejs https://github.com/zurb/tribute/blob/master/src/Tribute.js#L8-L33

...
import VueVTribute from 'vue-v-tribute'
...

Vue.use(VueVTribute, {
  noMatchTemplate: () => null,
  lookup: 'name',
  menuItemTemplate: (item: TributeItem<any>) => {
    return `${item.original.name} - ${item.original.username}`;
  },
  selectTemplate: function(item: TributeItem<any>) {
    return '@' + item.original.username;
  },
});

Use as directive

...
    <input
      type="text"
      v-tribute="{values: [ { name: 'Firstname Lastname', username: 'fila' }, { name: 'Max Mustermann', username: 'madmax' }]}"
    >
    </input>
...

Use as directive on wrapper element or wrapper component

...
    <your-custom-input-component
      v-tribute="{values: [ { name: 'Firstname Lastname', username: 'fila' }, { name: 'Max Mustermann', username: 'madmax' }]}"
    >
    </your-custom-input-component>
...