1.0.7 • Published 2 years ago
vue-tribute v1.0.7
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.
Install
$ npm install vue-tribute@next --save
# or...
$ yarn add vue-tribute@next
or
Use the UMD build from Unpkg, available as VueTribute
in the global scope.
<script src="/vendor/vue.js" />
<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 collection(s) object to the component.
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