vue-search-input

KO | EN

gitlite — search

#hacktoberfest #react #llm #machine-learning #docker #nodejs #macos #java #awesome #vue #security #pytorch #ios #open-source

vue-search-input

(★ 37)

A search input component for Vue.js 3

vue-search-input Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# vue-search-input <a href="https://npm.im/vue-search-input"><img src="https://badgen.net/npm/v/vue-search-input"></a> ![](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) ![](https://raw.githubusercontent.com/kouts/vue-search-input/main/coverage/badge.svg)

A Vue.js 3 search input component, inspired by the global search input of Storybook and GitHub.

![](https://raw.githubusercontent.com/kouts/vue-search-input/main/.github/vue-search-input.gif)

The `SearchInput` component displays a search input with some additional features built-in.

**Features:**

- **Focus** on the search input at any time by pressing the `/` key on the keyboard.
- Includes a default CSS styling but it's also easy to bring your own styles too.
- Completely customizable icons via `slots`
- Displays an `x` icon on the right side of the search input, used for **clearing** the text when there's a value typed inside.
- The search text gets cleared by pressing the `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

## Installation

```bash
npm i vue-search-input
```

## Usage

```html
<template>
  <SearchInput v-model="searchVal" />
</template>

const searchVal = ref('')

export default {
    components: {
      SearchInput,
    },
    setup() {
      return {
        searchVal,
      }
    },
  }
</script>
```

## Styling

`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 wrapper `div`.

## Events

> Events bound to the `SearchInput` component will be passed to the `input` element.

## Props

## Slots

`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" @click="$emit('click: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 <br />`{ 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                      | -                                                                                                                |

vue-search-input

vue-search-input Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

vue-search-input

vue-search-input Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README