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


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

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.