{"id":17857233,"url":"https://github.com/kouts/vue-search-input","last_synced_at":"2026-03-13T23:23:03.645Z","repository":{"id":37006260,"uuid":"448289623","full_name":"kouts/vue-search-input","owner":"kouts","description":"A search input component for Vue.js 3","archived":false,"fork":false,"pushed_at":"2026-03-11T19:50:44.000Z","size":1134,"stargazers_count":37,"open_issues_count":1,"forks_count":3,"subscribers_count":4,"default_branch":"main","last_synced_at":"2026-03-12T00:51:03.567Z","etag":null,"topics":["component","input","page","search","slash","vue"],"latest_commit_sha":null,"homepage":"https://vue-search-input.vercel.app/","language":"Vue","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/kouts.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-01-15T13:46:26.000Z","updated_at":"2026-03-11T19:50:46.000Z","dependencies_parsed_at":"2024-10-28T03:27:08.492Z","dependency_job_id":"cdac5a93-69e7-463c-84c7-fd90bbf515a8","html_url":"https://github.com/kouts/vue-search-input","commit_stats":{"total_commits":73,"total_committers":3,"mean_commits":"24.333333333333332","dds":0.2465753424657534,"last_synced_commit":"1ed50d62ba6f8455206d5035cf0ab60325cbaaaf"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"purl":"pkg:github/kouts/vue-search-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kouts%2Fvue-search-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kouts%2Fvue-search-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kouts%2Fvue-search-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kouts%2Fvue-search-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kouts","download_url":"https://codeload.github.com/kouts/vue-search-input/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kouts%2Fvue-search-input/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30477234,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-13T20:45:58.186Z","status":"ssl_error","status_checked_at":"2026-03-13T20:45:20.133Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["component","input","page","search","slash","vue"],"created_at":"2024-10-28T03:12:03.612Z","updated_at":"2026-03-13T23:23:03.640Z","avatar_url":"https://github.com/kouts.png","language":"Vue","funding_links":[],"categories":["Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"# vue-search-input \u003ca href=\"https://npm.im/vue-search-input\"\u003e\u003cimg src=\"https://badgen.net/npm/v/vue-search-input\"\u003e\u003c/a\u003e ![](https://img.badgesize.io/kouts/vue-search-input/main/dist/vue-search-input.umd.js.svg) ![](https://img.badgesize.io/kouts/vue-search-input/main/dist/vue-search-input.umd.js.svg?compression=gzip) ![](coverage/badge.svg)\n\nA Vue.js 3 search input component, inspired by the global search input of Storybook and GitHub.\n\n![](.github/vue-search-input.gif)\n\nThe `SearchInput` component displays a search input with some additional features built-in.\n\n**Features:**\n\n- **Focus** on the search input at any time by pressing the `/` key on the keyboard.\n- Includes a default CSS styling but it's also easy to bring your own styles too.\n- Completely customizable icons via `slots`\n- Displays an `x` icon on the right side of the search input, used for **clearing** the text when there's a value typed inside.\n- The search text gets cleared by pressing the `esc` key when the search input has focus (configurable).\n\n**_Important:_** It is advisable that you include the `SearchInput` component **only once** on each page.  \n In case multiple `SearchInput` components are present, the first one being displayed will take focus precedence upon the `/` keypress.\n\n**Demo with examples**\n\nhttps://vue-search-input.vercel.app\n\n## Installation\n\n```bash\nnpm i vue-search-input\n```\n\n## Usage\n\n```html\n\u003ctemplate\u003e\n  \u003cSearchInput v-model=\"searchVal\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import { ref } from 'vue'\n  import SearchInput from 'vue-search-input'\n  // Optionally import default styling\n  import 'vue-search-input/dist/styles.css'\n\n  const searchVal = ref('')\n\n  export default {\n    components: {\n      SearchInput,\n    },\n    setup() {\n      return {\n        searchVal,\n      }\n    },\n  }\n\u003c/script\u003e\n```\n\n## Styling\n\n`vue-search-input` includes default styling (`dist/styles.css`) with that you can use as a base to create your own CSS.\nAll the component's elements are inside a `div` which acts a wrapper for the icons and the input.\nThe default class for the wrapper `div` is `search-input-wrapper` you can override it by providing class(es) to the `SearchInput` component.\n\n\u003e Class and styles bound to the `SearchInput` component will be added to the wrapper `div`.\n\n## Events\n\n\u003e Events bound to the `SearchInput` component will be passed to the `input` element.\n\n| Name              | Description                             | Returned value |\n| :---------------- | :-------------------------------------- | :------------- |\n| update:modelValue | The updated bound model                 | `string`       |\n| click:search      | Emitted when the search icon is clicked | -              |\n| click:clear       | Emitted when the clear icon is clicked  | -              |\n\n## Props\n\n| Name                    | Type    | Description                                                                     | Default                |\n| :---------------------- | :------ | :------------------------------------------------------------------------------ | :--------------------- |\n| type                    | string  | The type of the input field. Allowed types are `search` and `text`              | `search`               |\n| modelValue (v-model)    | string  | The input's value                                                               | `''`                   |\n| wrapperClass            | string  | The default CSS class of the wrapper div                                        | `search-input-wrapper` |\n| searchIcon              | boolean | Displays the \"search\" icon                                                      | true                   |\n| shortcutIcon            | boolean | Displays the \"shortcut\" icon                                                    | true                   |\n| clearIcon               | boolean | Displays the \"clear text\" icon                                                  | true                   |\n| hideShortcutIconOnBlur  | boolean | Whether to hide the shortcut icon when the input loses focus                    | true                   |\n| clearOnEsc              | boolean | Whether to clear the input field when the `esc` key is pressed                  | true                   |\n| blurOnEsc               | boolean | Whether to takes the focus out of the input field when the `esc` key is pressed | true                   |\n| selectOnFocus           | boolean | Selects the input's text upon `/` keypress                                      | true                   |\n| shortcutListenerEnabled | boolean | Enables the functionality for the `/` keypress                                  | true                   |\n| shortcutKey             | string  | The `key` for the shortcut functionality                                        | `/`                    |\n\n## Slots\n\n`vue-search-input` includes some default icons but you can also customize them to suit your needs using the available `slots`.\n\n| Name          | Description                                                                              | Default content                                                                                                  |\n| :------------ | :--------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------- |\n| search-icon   | Slot for the search icon                                                                 | `\u003ci class=\"search-icon search\" @click=\"$emit('click:search')\"\u003e\u003c/i\u003e`                                              |\n| shortcut-icon | Slot for the shortcut icon                                                               | `\u003ci class=\"search-icon shortcut\" title='Press \"/\" to search'\u003e\u003c/i\u003e`                                               |\n| clear-icon    | Slot for the clear icon \u003cbr /\u003e`{ clear: () =\u003e void }` the function that clears the input | `\u003cbutton class=\"search-icon clear\" aria-label=\"Clear\" @mousedown=\"clear\" @keydown.space.enter=\"clear\"\u003e\u003c/button\u003e` |\n| append        | Adds an item inside the input wrapper, before the search icon                            | -                                                                                                                |\n| append-inner  | Adds an item inside the input wrapper, after the search icon                             | -                                                                                                                |\n| prepend       | Adds an item inside the input wrapper directly after the input element                   | -                                                                                                                |\n| prepend-outer | Adds an item inside the input wrapper directly after the clear icon                      | -                                                                                                                |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkouts%2Fvue-search-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkouts%2Fvue-search-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkouts%2Fvue-search-input/lists"}