# vue-taggable

> ### This is input taggable

Latest version **1.0.2** (published 2023-01-08) · 0 weekly downloads

## Install

```sh
npm install vue-taggable
pnpm add vue-taggable
yarn add vue-taggable
bun add vue-taggable
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-01-08 |
| First published | 2023-01-08 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 65.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Rashiqul Rony |
| Maintainers | rashiqulrony |
| Keywords | Input Tag, Input Taggable, Vue Input Taggable, Vue Input Tag |

## Links

- npm: https://www.npmjs.com/package/vue-taggable
- Repository: https://github.com/RashiqulRony/Vue-Taggable
- Homepage: https://github.com/RashiqulRony
- Issues: https://github.com/RashiqulRony/Vue-Taggable/issues
- npm.io page: https://npm.io/package/vue-taggable

## Recent versions

- 1.0.2 (latest) — 2023-01-08
- 1.0.1 — 2023-01-08
- 1.0.0 — 2023-01-08

## README

# Vue Taggable

### This is input taggable

<p align="center">
<img style="width: 100%" src="https://raw.githubusercontent.com/RashiqulRony/rony.mmj/master/ezgif.com-gif-maker.gif" alt="download" border="0" />
</p>

### Install Package
```
npm install vue-taggable
```

### Import Package
```javascript
import VueTaggable from "vue-taggable";
```


## Usage
```html
<VueTaggable v-model="tags"/>
```

```javascript
components: {
    VueTaggable
},

data() {
    return {
        tags: []
    }
},
```
## Props
| Name | Type | Default | Description |
| ---:| --- | ---| --- |
| value | Array | [] | Tags to be render in the input |
| placeholder | String | "" | Placeholder to be shown when no tags |
| read-only | Boolean | false | Set input to readonly |
| add-tag-on-blur | Boolean | false | Add tag on input blur |
| limit | String or Number | -1 (none) | Set a limit for the amount of tags |
| validate | String or Function (allows async) or Object | "" | Apply certain validator for user input. Choose from `email`, `url`, `text`, `digits` or `isodate`. Or pass a `function` or a `RegExp` object for custom validation |
| add-tag-on-keys | Array | [ 13 (return), 188 (comma), 9 (tab) ] | Keys that are going to add the new tag
| allow-duplicates | Boolean | false | Allow duplicate tags
| before-adding | Function | null | Function (allows async) to normalize tag before adding. E.g `(tag) => tag.toUpperCase()`

## Events
| Name | Arguments | Description |
| ---: | --- | --- |
| input | Array with tags | Emitted when a tag is added (after successful validation) and when a tag is removed |
| update:tags | Array with tags | Same as input event |


###  Author Info
**Name:** Rashiqul Rony <br>
**Github**: https://github.com/RashiqulRony

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