v-highlight-3

Highlight words with this simple and dependency-less Vue 3 directive.

Installation

Install this directive with:

1npm i --save v-highlight-3

1yarn add v-highlight-3

And then use it globally like this:

1import { createApp } from "vue";
2import { vHighlight } from "v-highlight-3";
3
4const app = createApp(/** your app component here */);
5
6app.directive("highlight", vHighlight);
7
8app.mount("#app");

Or use it locally on some of your components like this:

Options API

1<template>
2  <div v-highlight="['hello', 'world']">
3    <p>hello</p>
4    <p>world</p>
5  </div>
6</template>
7
8<script>
9import { vHighlight } from "v-highlight-3";
10
11export default {
12  directives: {
13    "highlight": vHighlight
14  }
15}
16</script>

Setup script

1<script setup>
2import { vHighlight } from "v-highlight-3";
3</script>
4
5<template>
6  <div v-highlight="['hello', 'world']">
7    <p>hello</p>
8    <p>world</p>
9  </div>
10</template>

Options

Styling

You can customise the class by sending it as an directive argument:

1<div v-highlight:bg-white="['hello', 'world']">
2  <!-- Rest of your HTML -->
3</div>

More options coming soon as this is on its first versions...

License

This package is open-sourced software licensed under the MIT license.