{"id":22486083,"url":"https://github.com/Remeic/vue-highlighter","last_synced_at":"2025-08-02T19:30:39.259Z","repository":{"id":57396185,"uuid":"126550662","full_name":"Remeic/vue-highlighter","owner":"Remeic","description":"🏷 Vue directive for highlight multiple istances of a word","archived":false,"fork":false,"pushed_at":"2022-10-20T20:17:38.000Z","size":238,"stargazers_count":38,"open_issues_count":5,"forks_count":12,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-14T04:31:28.313Z","etag":null,"topics":["hacktoberfest","highlight","javascript","vue","vue-directive","vue-highlighter","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Remeic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-24T00:07:04.000Z","updated_at":"2025-01-18T13:05:07.000Z","dependencies_parsed_at":"2022-09-13T18:42:56.597Z","dependency_job_id":null,"html_url":"https://github.com/Remeic/vue-highlighter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Remeic/vue-highlighter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Remeic%2Fvue-highlighter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Remeic%2Fvue-highlighter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Remeic%2Fvue-highlighter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Remeic%2Fvue-highlighter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Remeic","download_url":"https://codeload.github.com/Remeic/vue-highlighter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Remeic%2Fvue-highlighter/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268440139,"owners_count":24250731,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","highlight","javascript","vue","vue-directive","vue-highlighter","vuejs"],"created_at":"2024-12-06T17:13:51.575Z","updated_at":"2025-08-02T19:30:39.001Z","avatar_url":"https://github.com/Remeic.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# vue-highlighter\n\n\u003e **Warning** \u003cbr /\u003e\n\u003e This project is no longer maintained and its use is not recommended\n\n\n[![NPM version](https://img.shields.io/npm/v/vue-highlighter.svg?style=flat)](https://npmjs.com/package/vue-highlighter) [![NPM downloads](https://img.shields.io/npm/dm/vue-highlighter.svg?style=flat)](https://npmjs.com/package/vue-highlighter) [![Build Status](https://travis-ci.org/Remeic/vue-highlighter.svg?branch=master)](https://travis-ci.org/Remeic/vue-highlighter)\n[![codecov](https://codecov.io/gh/Remeic/vue-highlighter/branch/master/graph/badge.svg)](https://codecov.io/gh/Remeic/vue-highlighter)\n\nVue directive for highlight multiple istances of a word\n\n![Example](https://media.giphy.com/media/YU7J5r4WfnLO0geruD/giphy.gif)\n\n## Install\n\n```bash\nyarn add vue-highlighter\n```\n\nCDN: [UNPKG](https://unpkg.com/vue-highlighter/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-highlighter/) (available as `window.vueHighlighter`)\n\n## Usage\n\n***\n\n### Version 1.1.2 (**Deprecated**)\n```vue\n\u003ctemplate\u003e\n  \u003cp v-highlight:word=\"'Alessandra'\"\u003eI love Alessandra\u003c/p\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport vueHighlighter from 'vue-highlighter'\n\nexport default {\n  directives: {\n    vueHighlighter\n  }\n}\n\u003c/script\u003e\n```\n\n***\n\n### Version 2.1.2 ( and \u003e= )\n```vue\n\u003ctemplate\u003e\n  \u003cp v-highlight=\"{ word: word, live: live }\" \u003e{{ text }}\u003c/p\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport vueHighlighter from 'vue-highlighter'\n\nexport default {\n  data: () =\u003e {\n    return {\n      text: 'I love Alessandra , AlessandraGiulio',\n      word: 'Alessandra',\n      live: false,\n    }\n  },\n  directives: {\n    vueHighlighter\n  }\n}\n\u003c/script\u003e\n```\n\n#### Option\n  **Word (String)**: The text string to look for and highlight\n  ```js\n  data: () =\u003e {\n    return {\n      text: 'I love Alessandra',\n      word: 'Alessandra',\n      live: true,\n    }\n  }\n  ```\n  \n  **Word (Array[String])**: List of text strings to look for and highlight\n  ```js\n  data: () =\u003e {\n    return {\n      text: 'I love Alessandra',\n      word: ['I', 'Alessandra'],\n      live: true,\n    }\n  }\n  ```\n  \n  **Live**: Allow to highlight word and substring, by automatically changhe the regex expression \u003cbr\u003e\n  The live attribute is an optional attribute, is set to false by default\n  ```js\n  data: () =\u003e {\n    return {\n      text: 'I love Alessandra',\n      word: 'Alessandra',\n      live: true,\n    }\n  }\n  ```\n\n  **Color**: Allow to customize the color of text when highlighted\u003cbr\u003e\n  The color attribute is optional and is set to #fff by default\u003cbr\u003e\n  color can be HEX or String\u003cbr\u003e\n\n  ```js\n  data: () =\u003e {\n    return {\n      text: 'I love Alessandra',\n      word: 'Alessandra',\n      style: {\n        color: '#ffddee'\n      }\n    }\n  }\n  ```\n\n**Background Color**: Allow to customize the background color of text when highlighted\u003cbr\u003e\nThe bgColor attribute is optional and is set to #009688 by default\u003cbr\u003e\nbgColor can be HEX or String\n  \n  ```js\n  data: () =\u003e {\n    return {\n      text: 'I love Alessandra',\n      word: 'Alessandra',\n      style: {\n        bgColor: '#ffddee'\n      }\n    }\n  }\n  ```\n\n**Padding**: Allow to customize the padding of text when highlighted\u003cbr\u003e\nThe padding attribute is optional and is set to 0px 5px by default\u003cbr\u003e\npadding is validate if match this requirments: there is at least one number followed by one of this unit of measure ['cm','mm','in','px','pt','pc','em','ex','ch','rem','vw','vh','vmin','vmax','%']\n  \n  ```js\n  data: () =\u003e {\n    return {\n      text: 'I love Alessandra',\n      word: 'Alessandra',\n      style: {\n        padding: '4rem 5%'\n      }\n    }\n  }\n  ```\n\n## Works on\n\n* Paragraph\n* Ul\n* Ol\n* Button \n* A \n\n### Contributor\n\nThanks to [Andrea Stagi](https://github.com/astagi) to help me with troubleshooting ❤️.\n\n\n## License\n\nMIT \u0026copy; [Giulio Fagioli](https://github.com/remeic)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRemeic%2Fvue-highlighter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRemeic%2Fvue-highlighter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRemeic%2Fvue-highlighter/lists"}