Easy @mention, #hashtag, and URL Highlight for Vue 2.x

javascript-highlight-matching-text

Vue highlights is a Vue.js component that enables @metion, #hashtag, and URL to tag an editable content element.

javascript highlight matching text, javascript highlight text in div, highlight javascript library, jquery highlight text, javascript text selection library

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-highlights

# NPM
$ npm i vue-highlights

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 application template.

<vue-highlights
  v-model="text"
/>
export default {
  name: 'MyComponent',
  data () {
    return {
      text: text
    }
  }
}

3. Component props available.

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

@mention #hashtag And URL Highlighter, vue highlights Plugin/Github


See Demo And Download

Official Website(pggalaviz): Click Here

This superior jQuery/javascript plugin is developed by pggalaviz. For extra Advanced Usages, please go to the official website.