@mention #hashtag And URL Highlighter – vue-highlights

Install & Download:

# Yarn
$ yarn add vue-highlights
# NPM
$ npm i vue-highlights

Description:

vue-highlights is a Vue.js component that enables @metion, #hashtag, and URL highlighting in a contenteditable element.

Basic Usage:

1. Import and register the component.

import Vue from 'vue'
import VueHighlights, { autoLink, autoHighlight } from 'vue-highlights'

Vue.component(VueHighlights.name, VueHighlights)

2. Add the component to the app template.

<vue-highlights
  v-model="text"
/>

export default {
  name: 'MyComponent',
  data () {
    return {
      text: text
    }
  }
}

3. Available component props.

extractUrlsWithoutProtocol: {
  type: Boolean,
  default: true
},
caretColor: {
  type: String,
  default: '#ccc'
},
placeholder: {
  type: String,
  default: `What's Happening?`
},
value: String

Preview: