Vue Word Highlighter screenshot

Vue Word Highlighter

Author Avatar Theme by Kawamataryo
Updated: 9 Aug 2025
325 Stars

The word highlighter library for Vue 2 and Vue 3.

Overview

The Vue Word Highlighter is an innovative library designed for both Vue 2 and Vue 3 users, offering a streamlined way to highlight specific text within your applications. With its customizable features, developers can implement intuitive search functionalities that enhance user experience and site interactivity. Whether for educational tools, content management systems, or creative applications, this library effectively brings focus to key information presented in your text.

With simple installation via vue-demi for compatibility between Vue versions, this highlighter allows you to tailor the text highlighting according to your needs. By simply providing search terms and the corresponding body of text, you unlock a plethora of capabilities to highlight words dynamically, making it a valuable asset for any developer working with Vue.

Features

  • Flexible Search Queries: Accepts both strings and regular expressions for search words, providing versatility in highlighting text.

  • Customization Options: Control case sensitivity and diacritics sensitivity, ensuring that your search function behaves just as needed.

  • Split Search Capability: Choose to split search strings by spaces, allowing for more precise highlight functionality based on whole words or phrases.

  • Match Mode Control: Switch between “partial” and “exact” match modes to tailor search results to the desired level of precision.

  • Versatile Highlight Tag Options: Specify the type of HTML tag to wrap highlighted matches, with a default of <mark> for ease of application.

  • Class and Style Bindings: Easily apply classes and styles to highlighted text using Vue’s array or object syntax for enhanced visual presentation.

  • Support for HTML Content: Highlight HTML content as well as plain text, providing advanced features for more complex applications (Vue 3 only).

  • Real-Time Match Emission: Get live updates on matched words through the emitted events, helping you track changes directly from the parent component.