Basic Search

The v-highlight directive accepts a single string or a list of multiple strings.

Single Words

<script setup>
import vHighlight from 'custom-highlight';
</script>

<template>
  <div v-highlight="'fox'">
    <p>A swift, russet fox, full of boundless energy, propelled itself upward. With a burst of motion, it cleared a stationary dog below. This agile creature continued its journey without pause.</p>
    <p>Beneath the airborne fox lay the dog, languid, uninterested in the world around it. The sleepy canine remained still, undisturbed by the flurry above. It seemed content in its state of repose.</p>
  </div>
</template>

A swift, russet fox, full of boundless energy, propelled itself upward. With a burst of motion, it cleared a stationary dog below. This agile creature continued its journey without pause.

Beneath the airborne fox lay the dog, languid, uninterested in the world around it. The sleepy canine remained still, undisturbed by the flurry above. It seemed content in its state of repose.

Multiple Words

<template>
  <div v-highlight="['fox', 'dog']">
    <p>A swift, russet fox, full of boundless energy, propelled itself upward. With a burst of motion, it cleared a stationary dog below. This agile creature continued its journey without pause.</p>
    <p>Beneath the airborne fox lay the dog, languid, uninterested in the world around it. The sleepy canine remained still, undisturbed by the flurry above. It seemed content in its state of repose.</p>
  </div>
</template>

A swift, russet fox, full of boundless energy, propelled itself upward. With a burst of motion, it cleared a stationary dog below. This agile creature continued its journey without pause.

Beneath the airborne fox lay the dog, languid, uninterested in the world around it. The sleepy canine remained still, undisturbed by the flurry above. It seemed content in its state of repose.