@kamiazya/vue-highlight ✨

Vue(3+) directive for highlighting keywords in text.

You can highlight matching keywords in the text within a given element with your own CSS.

Internally, it uses the Custom Highlighting API, so it does not corrupt the DOM.

This API is not implemented in all browsers, so please check if it is supported by the supporting browsers before use.

For more information, click here.

Installation 📥

# By npm
$ npm install @kamiazya/vue-highlight
# By yarn
$ yarn add @kamiazya/vue-highlight
# By pnpm
$ pnpm add @kamiazya/vue-highlight

Usage 📘

Basic usage

Highlight the keyword "bar" in the text "foo bar baz".

<script setup>
import { ref } from "vue";
import vHighlight from "@kamiazya/vue-highlight";

const keyword = ref("bar");
</script>

<template>
  <div v-highlight="keyword">
    foo bar baz
  </div>
</template>
<style>
::highlight(v-highlight) {
  background-color: yellow;
  color: black;
}
</style>

If you want to use v-highlight directive in global, you can register the vHighlight direvtive to app instance.

import { vHighlight } from '@kamiazya/vue-highlight'; // Import the directive
import { createApp } from 'vue';

import App from './src/App.vue';

const app = createApp(App);
app.directive('highlight', vHighlight); // Register the directive
app.mount('#container');

Multiple keywords

Highlight the keywords "foo" and "baz" in the text "foo bar baz".

<script setup>
import { ref } from "vue";
import vHighlight from "@kamiazya/vue-highlight";

const keyword = ref(["foo", "baz"]);
</script>

<template>
<div v-highlight="keyword">
  foo bar baz
</div>
</template>
<style>
::highlight(v-highlight) {
  background-color: yellow;
  color: black;
}
</style>

Custom highlight name

Highlight the keyword "bar" in the text "foo bar baz" with a custom highlight name.

<script setup>
import { ref } from "vue";
import vHighlight from "@kamiazya/vue-highlight";

const keyword = ref("bar");
</script>

<template>
<div v-highlight:my-custom-highlight="keyword">
foo bar baz
</div>
</template>
<style>
::highlight(my-custom-highlight) {
  background-color: yellow;
  color: black;
}
</style>

Multiple highlights

Highlight the keywords "foo" and "baz" in the text "foo bar baz" with multiple highlights.

<script setup>
import { ref } from "vue";
import vHighlight from "@kamiazya/vue-highlight";

const keyword1 = ref("bar");
const keyword2 = ref("foo");
</script>

<template>
<div
  v-highlight:highlight1="keyword1"
  v-highlight:highlight2="keyword2"
>
foo bar baz
</div>
</template>
<style>
::highlight(highlight1) {
  background-color: yellow;
  color: black;
}
::highlight(highlight2) {
  background-color: red;
  color: white;
}
</style>

License ⚖️

This software is released under the MIT License, see LICENSE.