https://github.com/syropian/vue-tribute

A Vue.js wrapper for Zurb's Tribute library for native @mentions
https://github.com/syropian/vue-tribute

Last synced: 22 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/syropian/vue-tribute
• Owner: syropian
• License: mit
• Created: 2016-07-26T17:07:26.000Z (over 8 years ago)
• Default Branch: next
• Last Pushed: 2023-03-02T13:36:57.000Z (almost 2 years ago)
• Last Synced: 2024-05-02T01:06:23.688Z (8 months ago)
• Language: Vue
• Homepage: https://syropian.github.io/vue-tribute/
• Size: 1.32 MB
• Stars: 201
• Watchers: 5
• Forks: 24
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-tribute [![Tests](https://github.com/syropian/vue-tribute/actions/workflows/test.yml/badge.svg?branch=next)](https://github.com/syropian/vue-tribute/actions/workflows/test.yml)

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).

[View Demo](https://vue-tribute.netlify.app/)

## Install

```bash

$ npm install tributejs vue-tribute@next --save

# or...

$ yarn add tributejs vue-tribute@next

```

_or_

Use the UMD build from [Unpkg](https://unpkg.com/vue-tribute), available as `VueTribute` in the global scope. You will need to include Tribute.js yourself as it is a peer dependency.

```html

```

### 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 options object](https://github.com/zurb/tribute#initializing) to the component.

```vue

  

    

  

```

## 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

  

    

  

```

## License

MIT © [Collin Henderson](https://github.com/syropian)