Vue Word Highlighter

The word highlighter library for Vue 2.x & Vue 3.x.

View Demo View Github

Installation

Vue 3.x

yarn add vue-word-highlighter
# or
npm install vue-word-highlighter

Vue 2.x
powered by vue-demi.

yarn add vue-word-highlighter @vue/composition-api
# or
npm install vue-word-highlighter @vue/composition-api

Usage

To use it, just provide it with a search words to props and a body of text to default slots.

<template>
  <WordHighlighter
    query="vue"
  >
    The word highlighter library for Vue 2.x & Vue 3.x ?
  </WordHighlighter
  >
</template>

<script lang="ts">
import { defineComponent } from "vue";
import WordHighlighter from "vue-word-highlighter";

export default defineComponent({
  name: "App",
  components: {
    WordHighlighter,
  },
  setup() {
    return {};
  },
});
</script>

Output.

Vue Word Highlighter

Props

Property Type Required? Description
query String ✓ Search words. use regular expressions in the search string if regex is true.
caseSensitive Boolean Search should be case sensitive. defaults to false
splitBySpace Boolean whether split the string with spaces to make it a search string. If false, string being searched as a whole word. defaults to false
regex Boolean query string is evaluated as a regular expression. default to false
highlightClass String or Object or Array The class name to be applied to an highlight tag.
highlightStyle String or Object The inline style to be applied to an highlight tag.
highlightTag String Type of tag to wrap around highlighted matches; defaults to mark