mirror of
https://github.com/tenrok/vue-tribute.git
synced 2026-06-10 18:22:26 +03:00
Collin Henderson
80 lines
1.7 KiB
Markdown
80 lines
1.7 KiB
Markdown
# vue-tribute
|
|
|
|
[](https://travis-ci.org/syropian/vue-tribute)
|
|
|
|
> A Vue.js wrapper for Zurb's [Tribute](https://github.com/zurb/tribute) library for native @mentions.
|
|
|
|
> 🚦 Looking for Vue 3 support? Check out the [next branch](https://github.com/syropian/vue-tribute/tree/next).
|
|
|
|
## Install
|
|
|
|
```
|
|
$ yarn add vue-tribute
|
|
```
|
|
|
|
or
|
|
|
|
```
|
|
$ npm install vue-tribute --save
|
|
```
|
|
|
|
**or** include the UMD build, hosted by [unpkg](https://unpkg.com) in a `<script>` tag.
|
|
|
|
```js
|
|
<script src="//unpkg.com/vue-tribute" />
|
|
```
|
|
|
|
## Usage
|
|
|
|
Import and register the component.
|
|
|
|
```js
|
|
import VueTribute from 'vue-tribute'
|
|
|
|
export default {
|
|
...
|
|
components: {
|
|
VueTribute
|
|
}
|
|
}
|
|
```
|
|
|
|
In your template, wrap an `input`, `textarea` or `contenteditable` element in the `vue-tribute` component, and pass your Tribute options in.
|
|
|
|
```html
|
|
<div>
|
|
<vue-tribute :options="tributeOptions">
|
|
<input type="text" placeholder="@..." />
|
|
</vue-tribute>
|
|
</div>
|
|
```
|
|
|
|
See the available Tribute options [here](https://github.com/zurb/tribute#a-collection).
|
|
|
|
## Events
|
|
|
|
Tribute broadcasts two events — a `tribute-replaced` event, and a `tribute-no-match` event (see docs [here](https://github.com/zurb/tribute#replace-event)). Listeners for these events can be attached directly to the child element of the `<vue-tribute>` component. Eg:
|
|
|
|
```html
|
|
<vue-tribute :options="options">
|
|
<input type="text" placeholder="@..." @tribute-no-match="noMatchFound" />
|
|
</vue-tribute>
|
|
```
|
|
|
|
## Development
|
|
|
|
```bash
|
|
# To run the example
|
|
$ npm run example
|
|
|
|
# To run the tests
|
|
$ npm test
|
|
|
|
# To publish the dist file
|
|
$ npm run build
|
|
```
|
|
|
|
## License
|
|
|
|
MIT © [Collin Henderson](https://github.com/syropian)
|