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.
# By npm
$ npm install @kamiazya/vue-highlight
# By yarn
$ yarn add @kamiazya/vue-highlight
# By pnpm
$ pnpm add @kamiazya/vue-highlight
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');
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>
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>
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>
This software is released under the MIT License, see LICENSE.