Vue Directive Recipe

Because custom-highlight is implemented as a Custom Directive, it’s use in Vue couldn’t be easier. Just import the directive and add it to any element.

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

<template>
  <p v-highlight="'brown fox'">The quick brown fox jumps over the lazy dog.</p>
</template>

<style>
  ::highlight(default) {
    background-color: yellow;
    color: black;
  }
</style>

The quick brown fox jumps over the lazy dog.

NOTE

In the <script setup>, any camelCase variable that starts with the v prefix can be used as a custom directive. In the example above, vHighlight can be used in the template as v-highlight.