mirror of
https://github.com/tenrok/vue-tribute.git
synced 2026-06-02 17:24:06 +03:00
Collin Henderson
68 lines
1.6 KiB
Markdown
68 lines
1.6 KiB
Markdown
# 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](https://github.com/syropian/vue-tribute).
|
|
|
|
## Install
|
|
|
|
```bash
|
|
$ npm install vue-tribute@next --save
|
|
# or...
|
|
$ yarn add vue-tribute@next
|
|
```
|
|
|
|
_or_
|
|
|
|
Use the UMD build from [Unpkg](https://unpkg.com/vue-tribute), available as `VueTribute` in the global scope.
|
|
|
|
```html
|
|
<script src="/vendor/vue.js" />
|
|
<script src="https://unpkg.com/vue-tribute@next" />
|
|
```
|
|
|
|
### Globally
|
|
|
|
Import and register the module as a plugin.
|
|
|
|
```javascript
|
|
import { createApp } from 'vue'
|
|
import App from './App.vue'
|
|
import VueTribute from 'vue-tribute'
|
|
|
|
createApp(App).use(VueTribute).mount('#app')
|
|
```
|
|
|
|
### Per-component
|
|
|
|
```javascript
|
|
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](https://github.com/zurb/tribute#initializing) to the component.
|
|
|
|
## Events
|
|
|
|
All [custom Tribute events](https://github.com/zurb/tribute#events) will work as expected. Simply attach listeners for them like you would any other event.
|
|
|
|
```vue
|
|
<template>
|
|
<vue-tribute :options="options">
|
|
<input type="text" placeholder="@..." @tribute-replaced="doSomething" />
|
|
</vue-tribute>
|
|
</template>
|
|
```
|
|
|
|
## License
|
|
|
|
MIT © [Collin Henderson](https://github.com/syropian)
|