# vue-tag-search

> Vuejs 2.0 - Tag-style key-based input for search UI

Latest version **0.1.72** (published 2023-01-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-tag-search
pnpm add vue-tag-search
yarn add vue-tag-search
bun add vue-tag-search
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.72 |
| Published | 2023-01-04 |
| First published | 2022-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 109.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Seungwoo, Lee |
| Maintainers | seungwoo321 |
| Keywords | vue, vue-tag, vue-tag-search, tag, search, input |

## Links

- npm: https://www.npmjs.com/package/vue-tag-search
- Repository: https://github.com/Seungwoo321/vue-tag-search
- Homepage: https://seungwoo321.github.io/vue-tag-search/
- Issues: https://github.com/Seungwoo321/vue-tag-search/issues
- npm.io page: https://npm.io/package/vue-tag-search

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.14
- [core-js](https://npm.io/package/core-js.md) ^3.8.3

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.1.72 (latest) — 2023-01-04
- 0.1.71 — 2022-12-26
- 0.1.7 — 2022-12-26
- 0.1.6 — 2022-10-24
- 0.1.5 — 2022-10-18
- 0.1.4 — 2022-10-05
- 0.1.3 — 2022-09-30
- 0.1.2 — 2022-09-30
- 0.1.1 — 2022-09-30
- 0.1.0 — 2022-08-09

## README

# Vue Tag Search

Vuejs 2.0 - Tag-style key-based input for search UI

## Live Demo

TBD
<!-- [link]() -->

## Example Code

```bash
# Clone the project
git clone https://github.com/Seungwoo321/vue-tag-search.git

# Go into the cloned directory
cd vue-tag-search

# npm install
npm install

# npm run serve
npm run serve
```

Open browser to <http://localhost:8080>

![vue-pivottable-demo.gif](./sample.png)

## Installation

```shall
npm i vue-tag-search
```

## Usage

```html
<template>
  <vue-tag-search
    v-model="searchModel"
    :data="searchKeys"
    placeholder="Please select a key to search"
    @add:searchModel="addSearchModel"
    @remove:searchModel="removeSearchModel"
  >
  </vue-tag-search>
</template>

<script>
import VueTagSearch from 'vue-tag-search'

export default {
  components: {
    VueTagSearch
  },
  data () {
    return {
      searchKeys: [
        'FirstName', 'LastName', 'Age', 'City', 'Country'
      ],
      searchModel: {
        FirstName: [],
        LastName: [],
        Age: [],
        City: ['Seoul'],
        Country: ['Korea']
      }
    }
  },
  methods: {
    addSearchModel ([key, value]) {
      this.searchModel[key].push(value)
    },
    removeSearchModel ([key, value]) {
      this.searchModel[key].splice(this.searchModel[key].indexOf(value), 1)
    }
  }
}
</script>

```

## Inspired

* [museui/muse-ui](https://github.com/museui/muse-ui) - Material Design UI library for Vuejs 2.0

## License

MIT

---
_Source: https://npm.io/package/vue-tag-search · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._