vue-word-highlighter

The word highlighter library for Vue 2 & Vue 3.

Demo

CodeSandbox

📦 Installation

Vue 3

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

Vue 2

powered by vue-demi.

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

If you get a Uncaught TypeError: e.defineComponent is not a function error, and it doesn't work, try this one from vue-demi

🚀 Usage

To use it, just provide it with 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>
  <!--  or
  <WordHighlighter 
    query="vue"
    textToHighlight="The word highlighter library for Vue 2.x Vue 3.x 💅"
  />
  -->
</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.

⚒ Details

Props

Emits

By using matches emit, you can know from the parent component whether it is highlighted by VueWordHighlighter or not.

<template>
  <div>
    Matched word count: {{ matches.length }}
  </div>
  <WordHighlighter query="vue" @matches="(e) => { matches = e }">
    The word highlighter library for Vue 2.x Vue 3.x 💅
  </WordHighlighter>
</template>

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

export default defineComponent({
  name: "App",
  components: {
    WordHighlighter,
  },
  setup() {
    const matches = ref([]);
    return {
      matches
    };
  },
});
</script>

📄 License

vue-word-highlighter is available under the MIT License.