# vue-word-highlighter

> The word highlighter library for Vue.js

Latest version **1.2.6** (published 2025-10-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-word-highlighter
pnpm add vue-word-highlighter
yarn add vue-word-highlighter
bun add vue-word-highlighter
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.2.6 |
| Published | 2025-10-29 |
| First published | 2021-07-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 38.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 339 |
| Author | kawamataryo |
| Maintainers | ryokawamata |

## Links

- npm: https://www.npmjs.com/package/vue-word-highlighter
- Repository: https://github.com/kawamataryo/vue-word-highlighter
- Homepage: https://github.com/kawamataryo/vue-word-highlighter#readme
- Issues: https://github.com/kawamataryo/vue-word-highlighter/issues
- npm.io page: https://npm.io/package/vue-word-highlighter

## Dependencies (2)

- [vue-demi](https://npm.io/package/vue-demi.md) 0.14.10
- [diacritics](https://npm.io/package/diacritics.md) 1.3.0

## Recent versions

- 1.2.6 (latest) — 2025-10-29
- 1.2.5 — 2024-10-23
- 1.2.4 — 2024-02-15
- 1.2.3 — 2023-02-04
- 1.2.2 — 2022-12-29
- 1.2.1 — 2022-12-29
- 1.2.0 — 2022-12-28
- 1.1.2 — 2022-11-20
- 1.1.1 — 2022-10-08
- 1.1.0 — 2022-10-08
- 1.0.6 — 2022-09-17
- 1.0.5 — 2022-07-04
- 1.0.4 — 2021-08-06
- 1.0.3 — 2021-08-05
- 1.0.2 — 2021-08-05
- … 33 more at https://npm.io/package/vue-word-highlighter/versions

## README

<p><img width="450" alt="Vue Word highlighter" src="https://user-images.githubusercontent.com/11070996/127788684-906f7756-865f-44ae-b27a-2a80e3c7349b.png"></p>

[![CI](https://github.com/kawamataryo/vue-word-highlighter/actions/workflows/ci.yml/badge.svg)](https://github.com/kawamataryo/vue-word-highlighter/actions/workflows/ci.yml)
<a href="https://npmcharts.com/compare/vue-word-highlighter?minimal=true"><img src="https://img.shields.io/npm/dt/vue-word-highlighter.svg" alt="Downloads"></a>
<a href="https://www.npmjs.com/package/vue-word-highlighter"><img src="https://img.shields.io/npm/v/vue-word-highlighter.svg" alt="Version"></a>
<a href="https://www.npmjs.com/package/vue-word-highlighter"><img src="https://img.shields.io/npm/l/vue-word-highlighter.svg" alt="License"></a>
<a href="https://github.com/kawamataryo/vue-word-highlighter" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/kawamataryo/vue-word-highlighter?style=social"></a>

The word highlighter library for Vue 2 & Vue 3.

### [Demo](https://kawamataryo.github.io/vue-word-highlighter/)
### [CodeSandbox](https://codesandbox.io/s/vue3-word-highlighter-example-u2bhe)


## 📦 Installation

### Vue 3
```bash
yarn add vue-word-highlighter
# or
npm install vue-word-highlighter
```

### Vue 2
powered by [vue-demi](https://github.com/antfu/vue-demi).
```bash
yarn add vue-word-highlighter @vue/composition-api
# or
npm install vue-word-highlighter @vue/composition-api
```

If you get a `Uncaught TypeError: e.defineComponent is not a function` error, and it doesn't work, try [this one](https://github.com/vueuse/vue-demi#manually-switch-versions) from vue-demi

## 🚀 Usage
To use it, just provide it with search words to props and a body of text to default slots.


```vue
<template>
  <WordHighlighter query="vue">
    The word highlighter library for Vue 2.x Vue 3.x 💅
  </WordHighlighter>
  <!--  or
  <WordHighlighter 
    query="vue"
    textToHighlight="The word highlighter library for Vue 2.x Vue 3.x 💅"
  />
  -->
</template>

<script lang="ts">
import { defineComponent } from "vue";
import WordHighlighter from "vue-word-highlighter";

export default defineComponent({
  name: "App",
  components: {
    WordHighlighter,
  },
  setup() {
    return {};
  },
});
</script>
```

Output.

![](https://i.gyazo.com/ca4c1c6b76a47797cc5318ef6d01d6f2.png)

## ⚒ Details
### Props

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| query | String or RegExp | ✓ | Search words. Can be use string or regular expressions. |
| caseSensitive | Boolean |  | Whether string being searched is case sensitive. defaults to `false`. |
| diacriticsSensitive | Boolean |  | Whether string being searched is diacritics sensitive. defaults to `false`. |
| splitBySpace | Boolean |  | Whether split the string with spaces to make it a search string. If false, the string is being searched as a whole word. defaults to `false`. When the query is set to a RegExp, the value of splitBySpace will be set to false.  |
| matchMode | "partial" or "exact" | If "exact", only whole words are matched. For example, searching for "Java" excludes "JavaScript". Defaults to "partial".
| highlightTag | String |  | Type of tag to wrap around highlighted matches; defaults to `mark`. |
| highlightClass | String or Object or Array |  | Classes to be added to highlighted tag. Similar to class bindings in vue, it accepts Array syntax, Object syntax, or class as String.|
| highlightStyle | String or Object or Array | | Styles to be applied to highlighted tag. Similar to style bindings in vue, it accepts Array syntax, Object syntax, or plain styling as String. |
| wrapperTag | String |  | Type of tag to wrap around whole text; defaults to `span`. |
| wrapperClass | String or Object or Array |  | Classes to be added to wrap around the whole tag. Similar to class bindings in vue, it accepts Array syntax, Object syntax, or class as String. |
| textToHighlight | String |  | Text to be highlight. If this is not specified, the default slot value will be used for the search.  |
| htmlToHighlight | String |  | HTML to be highlighted。This value is inserted as `InnerHTML`. This props takes precedence over `textToHighlight` and `slot`. This props is an experimental feature that only works for Vue3. |

### Emits

| Property | Type |  Description |
|:---|:---:|:---|
| matches | Array | Returns matches words. This event fires when mounted and when the query and highlighted text are changed.|

By using matches emit, you can know from the parent component whether it is highlighted by VueWordHighlighter or not.

<details>
<summary>Example</summary>

```vue
<template>
  <div>
    Matched word count: {{ matches.length }}
  </div>
  <WordHighlighter query="vue" @matches="(e) => { matches = e }">
    The word highlighter library for Vue 2.x Vue 3.x 💅
  </WordHighlighter>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import WordHighlighter from "vue-word-highlighter";

export default defineComponent({
  name: "App",
  components: {
    WordHighlighter,
  },
  setup() {
    const matches = ref([]);
    return {
      matches
    };
  },
});
</script>
```

</details>

## 📄 License

vue-word-highlighter is available under the MIT License.

---
_Source: https://npm.io/package/vue-word-highlighter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._