Easily implement word highlighter in Vue.js version 2 and 3

Category: Uncategorized Vue.js Vue.js Others | August 5, 2021
Author: kawamataryo
Official Page: Go to website
Last Update: August 5, 2021
License: MIT

vue word highlighter

About:

Easily implement word highlighter in Vue.js version 2 and 3, by installing vue-word-highlighter component in your project. Which light-weight in the size and simple to use in your project.

How can I use it?

1. Install the vue-word-highlighter component with npm or yarn.

#npm
npm install vue-word-highlighter

#yarn
yarn add vue-word-highlighter

2. Import the required components.

import { defineComponent } from "vue";
import WordHighlighter from "vue-word-highlighter";

3. Code usage.

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

4. Now the template.

<template>
  <WordHighlighter query="lipku">
    The word highlighter library on lipku.com
  </WordHighlighter>
</template>