A Vue.js library for highlighting search terms within text, supporting both Vue 2 and Vue 3.
Vue Word Highlighter is a Vue.js library that provides a component for highlighting search terms within text content. It solves the need for dynamic text highlighting in user interfaces, such as search results or document viewers, with configurable matching rules and styling options. The library supports both Vue 2 and Vue 3 through vue-demi.
Vue.js developers building applications that require text search highlighting, such as search interfaces, documentation viewers, or content management systems.
Developers choose Vue Word Highlighter for its simplicity, Vue 2/3 compatibility, and flexible configuration—offering a lightweight, component-based solution without heavy dependencies.
The word highlighter library for Vue 2 and Vue 3.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Supports string or RegExp queries with options for case sensitivity, diacritics sensitivity, and partial/exact match modes, allowing precise control over matches.
Allows setting custom tags, CSS classes, and inline styles via props similar to Vue's native bindings, enabling seamless integration with existing designs.
Uses vue-demi to support both Vue versions, making it suitable for projects migrating or maintaining compatibility across Vue ecosystems.
Emits an array of matched words on mount and changes, allowing parent components to easily react to highlighting events.
HTML content highlighting is marked as experimental and only works with Vue 3, limiting its use for complex or production-grade Vue 2 applications.
Requires installing @vue/composition-api for Vue 2, and may need manual version switching via vue-demi, adding complexity to the setup process.
Lacks pre-styled components; all highlighting aesthetics must be custom-coded, which can increase development time for teams without design resources.