The `vue-highlight-words` library is a Vue component designed to efficiently highlight specified words within a larger body of text. It is currently stable at version 3.0.1, primarily supporting Vue 3.0.0 and above. The package has recently undergone a significant rewrite in TypeScript, as seen in its v3.0.0 release, indicating active maintenance and a commitment to modern web development standards. Its release cadence is tied to Vue's major versions, with v2.0.0 introducing Vue 3 support and v3.0.0 focusing on internal restructuring and type safety. A key differentiator of `vue-highlight-words` is its approach to rendering: unlike many alternatives, it utilizes Vue's `render` function directly instead of relying on `v-html` or `el.innerHTML`. This method significantly enhances security by preventing cross-site scripting (XSS) vulnerabilities often associated with raw HTML injection. The component is a direct port of the popular `react-highlight-words` library, offering a similar API and feature set for Vue developers. It provides options for custom styling, active highlighting, and auto-escaping search terms, making it a robust solution for text highlighting needs within Vue applications.
npm install vue-highlight-wordsVerified import paths — ran on the pinned version, not inferred.
This example demonstrates how to import and use the `Highlighter` component within a Vue 3 Single File Component (SFC), providing text to highlight and an array of search terms.
Ensure your project's build configuration correctly handles modern JavaScript modules (ESM) and TypeScript definitions. Update CommonJS `require` statements to access the `.default` export if necessary.
Refactor your component to utilize the default slot for custom rendering of highlighted chunks, passing `v-slot` props as needed.
For Vue 2 projects, use the `1.0` branch or a `vue-highlight-words` version `<2.0.0`. For Vue 3, use custom render functions with scoped slots instead of the removed `highlight tag props` for advanced styling.
For Vue 2, install `vue-highlight-words@^1.0.0`. For Vue 3, install `vue-highlight-words@^3.0.0` (or `^2.0.0` for earlier Vue 3 versions).
Ensure `import Highlighter from 'vue-highlight-words'` is present in your script block and `Highlighter` is listed in the `components` option of your Vue component (e.g., `components: { Highlighter }`).Always pass an array of strings to the `searchWords` prop. If the input is from a string, ensure it's processed into an array (e.g., `this.words.split(' ')`) before binding.Verify that all variables used in your template are properly declared in the `data()` return object or as `computed` properties within your Vue component's script block.