{"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,"search_vec":"'3':80 '3.0.0':36 '3.0.1':32 'activ':56,172 'altern':106 'api':159 'applic':191 'approach':101 'associ':137 'auto':176 'auto-escap':175 'bodi':23 'cadenc':68 'commit':60 'compon':13,143 'cross':131 'cross-sit':130 'current':28 'custom':170 'design':14 'develop':64,165 'differenti':93 'direct':113,146 'effici':16 'el.innerhtml':122 'enhanc':126 'escap':177 'featur':161 'focus':84 'function':112 'highlight':2,7,17,97,153,173,187,194 'html':120,140 'indic':55 'inject':141 'instead':114 'intern':86 'introduc':78 'javascript':192 'key':92 'larger':22 'librari':9,155 'mainten':57 'major':74 'make':180 'mani':105 'method':124 'modern':62 'need':188 'offer':156 'often':136 'option':168 'packag':40 'popular':150 'port':147 'prevent':129 'primarili':33 'provid':167 'raw':139 'react':152 'react-highlight-word':151 'recent':42 'releas':54,67 'reli':116 'render':103,111 'restructur':87 'rewrit':46 'robust':183 'safeti':90 'script':133 'search':178 'secur':127 'seen':50 'set':162 'signific':45,125 'similar':158 'site':132 'solut':184 'specifi':18 'stabl':29 'standard':65 'style':171 'support':34,81 'term':179 'text':25,186 'tie':70 'type':89 'typescript':48,195 'undergon':43 'unlik':104 'util':108 'v':119 'v-html':118 'v2.0.0':77 'v3.0.0':53,83 'version':31,75 'vue':1,6,12,35,72,79,96,109,164,190,193 'vue-highlight-word':5,95 'vulner':135 'web':63 'within':20,189 'word':3,8,19,98,154 'xss':134","created_at":"2026-04-19T13:43:27.210989+00:00","updated_at":"2026-04-19T13:43:27.210989+00:00","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","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/Astray-git/vue-highlight-words","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-highlight-words","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","serialization","auth-security"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}