
Security News
Deno 2.4 Brings Back deno bundle, Improves Dependency Management and Observability
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
vue-search-input
Advanced tools
A Vue.js 3 search input component, inspired by the global search input of Storybook and GitHub.
A Vue.js 3 search input component, inspired by the global search input of Storybook and GitHub.
The SearchInput
component displays a search input with some additional features built-in.
Features:
/
key on the keyboard.slots
x
icon on the right side of the search input, used for clearing the text when there's a value typed inside.esc
key when the search input has focus (configurable).Important: It is advisable that you include the SearchInput
component only once on each page.
In case multiple SearchInput
components are present, the first one being displayed will take focus precedence upon the /
keypress.
Demo with examples
https://vue-search-input.vercel.app
npm i vue-search-input
<template>
<SearchInput v-model="searchVal" />
</template>
<script>
import { ref } from 'vue'
import SearchInput from 'vue-search-input'
// Optionally import default styling
import 'vue-search-input/dist/styles.css'
const searchVal = ref('')
export default {
components: {
SearchInput
},
setup() {
return {
searchVal
}
}
}
</script>
vue-search-input
includes default styling (dist/styles.css
) with that you can use as a base to create your own CSS.
All the component's elements are inside a div
which acts a wrapper for the icons and the input.
The default class for the wrapper div
is search-input-wrapper
you can override it by providing class(es) to the SearchInput
component.
Class and styles bound to the
SearchInput
component will be added to the wrapperdiv
.
Events bound to the
SearchInput
component will be passed to theinput
element.
Name | Description | Returned value |
---|---|---|
update:modelValue | The updated bound model | string |
Name | Type | Description | Default |
---|---|---|---|
type | string | The type of the input field. Allowed types are search and text | search |
modelValue (v-model) | string | The input's value | '' |
wrapperClass | string | The default CSS class of the wrapper div | search-input-wrapper |
searchIcon | boolean | Displays the "search" icon | true |
shortcutIcon | boolean | Displays the "shortcut" icon | true |
clearIcon | boolean | Displays the "clear text" icon | true |
hideShortcutIconOnBlur | boolean | Whether to hide the shortcut icon when the input loses focus | true |
clearOnEsc | boolean | Whether to clear the input field when the esc key is pressed | true |
blurOnEsc | boolean | Whether to takes the focus out of the input field when the esc key is pressed | true |
selectOnFocus | boolean | Selects the input's text upon / keypress | true |
shortcutListenerEnabled | boolean | Enables the functionality for the / keypress | true |
shortcutKey | string | The key for the shortcut functionality | / |
vue-search-input
includes some default icons but you can also customize them to suit your needs using the available slots
.
Name | Description | Default content |
---|---|---|
search-icon | Slot for the search icon | <i class="search-icon search"></i> |
shortcut-icon | Slot for the shortcut icon | <i class="search-icon shortcut" title='Press "/" to search'></i> |
clear-icon | Slot for the clear icon { clear: () => void } the function that clears the input | <button class="search-icon clear" aria-label="Clear" @mousedown="clear" @keydown.space.enter="clear"></button> |
append | Adds an item inside the input wrapper, before the search icon | - |
append-inner | Adds an item inside the input wrapper, after the search icon | - |
prepend | Adds an item inside the input wrapper directly after the input element | - |
prepend-outer | Adds an item inside the input wrapper directly after the clear icon | - |
FAQs
A Vue.js 3 search input component, inspired by the global search input of Storybook and GitHub.
The npm package vue-search-input receives a total of 323 weekly downloads. As such, vue-search-input popularity was classified as not popular.
We found that vue-search-input demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.