vue-tribute

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

🚦 Looking for Vue 2 support? Check out the master branch.

View Demo

Install

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

or

Use the UMD build from Unpkg, available as VueTribute in the global scope. You will need to include Tribute.js yourself as it is a peer dependency.

<script src="/vendor/vue.js" />
<script src="https://unpkg.com/tributejs" />
<script src="https://unpkg.com/vue-tribute@next" />

Globally

Import and register the module as a plugin.

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

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

Per-component

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 options object to the component.

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

Events

All custom Tribute events will work as expected. Simply attach listeners for them like you would any other event.

<template>
  <vue-tribute :options="options">
    <input type="text" placeholder="@..." @tribute-replaced="doSomething" />
  </vue-tribute>
</template>

License

MIT © Collin Henderson