{"id":12492,"library":"vue-highlight-words","title":"Vue Highlight Words","description":"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.","status":"active","version":"3.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/Astray-git/vue-highlight-words","tags":["javascript","vue","highlight","typescript"],"install":[{"cmd":"npm install vue-highlight-words","lang":"bash","label":"npm"},{"cmd":"yarn add vue-highlight-words","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-highlight-words","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for Vue 3 component functionality.","package":"vue","optional":false}],"imports":[{"note":"The component is exported as the default export. Named imports like `{ Highlighter }` will not work.","wrong":"import { Highlighter } from 'vue-highlight-words'","symbol":"Highlighter","correct":"import Highlighter from 'vue-highlight-words'"},{"note":"Since v3.0.0, the package may be ESM-only, requiring access to the `.default` property for CommonJS interop in some environments.","wrong":"const Highlighter = require('vue-highlight-words')","symbol":"Highlighter (CommonJS)","correct":"const { default: Highlighter } = require('vue-highlight-words')"},{"note":"For TypeScript users, importing the component's type definition is useful for prop typing or component references.","symbol":"Highlighter Component Type","correct":"import type Highlighter from 'vue-highlight-words'"}],"quickstart":{"code":"<template>\n  <div id=\"app\">\n    <Highlighter class=\"my-highlight\" :style=\"{ color: 'red' }\"\n      highlightClassName=\"highlight\"\n      :searchWords=\"keywords\"\n      :autoEscape=\"true\"\n      :textToHighlight=\"text\"/>\n  </div>\n</template>\n\n<script>\nimport Highlighter from 'vue-highlight-words'\n\nexport default {\n  name: 'app',\n  components: {\n    Highlighter\n  },\n  data() {\n    return {\n      text: 'The dog is chasing the cat. Or perhaps they\\'re just playing?',\n      words: 'and or the'\n    }\n  },\n  computed: {\n    keywords() {\n      return this.words.split(' ')\n    }\n  }\n}\n</script>","lang":"javascript","description":"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."},"warnings":[{"fix":"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.","message":"Version 3.0.0 removed Babel transpilation for distribution code, which might affect older build setups expecting CommonJS output or specific transpilation targets. It also included a full TypeScript rewrite.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Refactor your component to utilize the default slot for custom rendering of highlighted chunks, passing `v-slot` props as needed.","message":"The `custom` prop was removed in v3.0.0. Custom rendering logic must now be implemented directly using slots.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"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.","message":"Version 2.0.0 introduced breaking changes by dropping support for Vue 2, now exclusively supporting Vue 3.0.0 and newer. Additionally, `highlight tag props` were removed.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"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).","message":"This package is specifically for Vue 3. If you are developing with Vue 2, you must use a version from the `1.0` branch, which is separately maintained.","severity":"gotcha","affected_versions":"<2.0.0 (for Vue 2 support), >=2.0.0 (for Vue 3 support)"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"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 }`).","cause":"The `Highlighter` component was not correctly imported or registered in your Vue application.","error":"[Vue warn]: Failed to resolve component: Highlighter"},{"fix":"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.","cause":"The `searchWords` prop expects an array of strings, but it received an undefined or non-array value.","error":"TypeError: Cannot read properties of undefined (reading 'split') (or similar error related to array methods)"},{"fix":"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.","cause":"A data property or computed property referenced in the template (e.g., `text` or `keywords`) has not been correctly defined in the component's `data()` or `computed` options.","error":"Property or method \"text\" is not defined on the instance but referenced during render"}],"ecosystem":"npm"}