https://github.com/kawamataryo/vue-word-highlighter
The word highlighter library for Vue 2 and Vue 3.
https://github.com/kawamataryo/vue-word-highlighter
typescript vue vue-components vue3 vuejs
Last synced: 6 months ago
JSON representation
The word highlighter library for Vue 2 and Vue 3.
- Host: GitHub
- URL: https://github.com/kawamataryo/vue-word-highlighter
- Owner: kawamataryo
- License: mit
- Created: 2021-07-29T23:35:30.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-05-14T22:22:10.000Z (6 months ago)
- Last Synced: 2025-05-14T23:25:52.084Z (6 months ago)
- Topics: typescript, vue, vue-components, vue3, vuejs
- Language: TypeScript
- Homepage: https://kawamataryo.github.io/vue-word-highlighter/
- Size: 4.34 MB
- Stars: 321
- Watchers: 3
- Forks: 17
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-word-highlighter - The word highlighter library for Vue 2 and Vue 3. (Components & Libraries / UI Components)
- fucking-awesome-vue - vue-word-highlighter - The word highlighter library for Vue 2 and Vue 3. (Components & Libraries / UI Components)
- awesome-vue - vue-word-highlighter - The word highlighter library for Vue 2 and Vue 3. (Components & Libraries / UI Components)
README
[](https://github.com/kawamataryo/vue-word-highlighter/actions/workflows/ci.yml)
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
The word highlighter library for Vue 2.x Vue 3.x ๐
import { defineComponent } from "vue";
import WordHighlighter from "vue-word-highlighter";
export default defineComponent({
name: "App",
components: {
WordHighlighter,
},
setup() {
return {};
},
});
```
Output.
## โ 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.
Example
```vue
Matched word count: {{ matches.length }}
{ matches = e }">
The word highlighter library for Vue 2.x Vue 3.x ๐
import { defineComponent, ref } from "vue";
import WordHighlighter from "vue-word-highlighter";
export default defineComponent({
name: "App",
components: {
WordHighlighter,
},
setup() {
const matches = ref([]);
return {
matches
};
},
});
```
## ๐ License
vue-word-highlighter is available under the MIT License.