https://github.com/matiastucci/vue-input-tag

:bookmark: Vue.js 2.0 Input Tag Component
https://github.com/matiastucci/vue-input-tag

input tags vue vuejs vuejs-components vuejs2

Last synced: about 1 month ago
JSON representation

:bookmark: Vue.js 2.0 Input Tag Component

• Host: GitHub
• URL: https://github.com/matiastucci/vue-input-tag
• Owner: matiastucci
• License: mit
• Created: 2016-10-25T08:37:51.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T17:19:18.000Z (almost 2 years ago)
• Last Synced: 2024-09-28T17:42:01.682Z (about 2 months ago)
• Topics: input, tags, vue, vuejs, vuejs-components, vuejs2
• Language: JavaScript
• Homepage: https://tucci.me/vue-input-tag
• Size: 3.13 MB
• Stars: 536
• Watchers: 8
• Forks: 135
• Open Issues: 36
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# vue-input-tag

> A Vue.js 2.0 input tag component inspired in [react-tagsinput](https://github.com/olahol/react-tagsinput)

[![Codeship Status for matiastucci/vue-input-tag](https://app.codeship.com/projects/0f715410-172a-0137-7928-063230c44fa3/status?branch=master)](https://app.codeship.com/projects/328055)

[![Coverage Status](https://coveralls.io/repos/github/matiastucci/vue-input-tag/badge.svg?branch=master)](https://coveralls.io/github/matiastucci/vue-input-tag?branch=master)

[![Version](https://img.shields.io/npm/v/vue-input-tag.svg)](https://www.npmjs.com/package/vue-input-tag)

[![License](https://img.shields.io/npm/l/vue-input-tag.svg)](https://www.npmjs.com/package/vue-input-tag)

[![Monthly Downloads](https://img.shields.io/npm/dm/vue-input-tag.svg)](https://www.npmjs.com/package/vue-input-tag)



  



## Installation

#### NPM / Yarn

```bash

npm install vue-input-tag --save

```

```bash

yarn add vue-input-tag

```

Then you need to import and register it:

```js

import InputTag from 'vue-input-tag'

```

```js

Vue.component('input-tag', InputTag)

```

#### CDN

```html

```

Then you need to register it:

`Vue.component('input-tag', vueInputTag.default)`

## Usage

```html

```

## 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 |