packages/docs/src/pages/en/components/highlights.md
The v-highlight component marks matching substrings within a block of text.
::: warning
This feature requires v4.1.0
:::
Labs components require manual import and registration with the Vuetify instance.
import { VHighlight } from 'vuetify/labs/VHighlight'
export default createVuetify({
components: {
VHighlight,
},
})
| Component | Description |
|---|---|
| v-highlight | Primary component |
Pass a string or array of strings to query to be marked. Multiple terms are matched independently and overlapping or adjacent ranges are merged.
<ExamplesExample file="v-highlight/prop-query" />Pass pre-computed [start, end] index pairs to matches to skip the internal search step entirely. This is useful if you need to bind fuzzy-search algorithm that responds with matching ranges.
Use mark-class to customize the mark styling with CSS classes.
<ExamplesExample file="v-highlight/props-mark-class" />Override --v-highlight-background, --v-highlight-color, and --v-highlight-border-radius on any ancestor to restyle marks without touching the component.