A tags input component for Vue 3 with autocompletion, custom validation, templating and much more

Overview

vue-tags-input

A tags input component for Vue 3 with autocompletion, custom validation, templating and much more

Forked from @johmun/vue-tags-input, which you should use instead if your project is on Vue 2.

Demo & Docs (for the original version)

Features

  • No dependencies
  • Custom validation rules
  • Hooks: Before adding, Before deleting ...
  • Edit tags after creation
  • Fast setup
  • Works with Vuex
  • Small size: 34kb minified (css included) | gzipped 9kb
  • Autocompletion
  • Many customization options
  • Own templates
  • Delete tags on backspace
  • Add tags on paste
  • Examples & Docs

Install

NPM

npm install @sipec/vue3-tags-input

CDN

">

Usage

">
<template>
  <div>
    <vue-tags-input
      v-model="tag"
      :tags="tags"
      @tags-changed="newTags => tags = newTags"
    />
  div>
template>
">
<script>
import VueTagsInput from "@sipec/vue3-tags-input";

export default {
  components: {
    VueTagsInput,
  },
  data() {
    return {
      tag: '',
      tags: [],
    };
  },
};
</script>

Migration From Vue 2

This version is faithful to the original spec. The only thing you'll have to change is replacing any usages of tags.sync with vmodel:tags in the props

License

MIT

Copyright (c) 2019 Johannes Munari

Comments
  • Autocomplete list invisible because out of the screen

    Autocomplete list invisible because out of the screen

    Thanks for this component! I have it just at the bottom of the application window. So the autocomplete list is not visible. The list is there, because if I enter a letter a one pixel line appears under the component and if I click here, a tag will be entered. Is there a way to move it above the component? Thanks! mario

    opened by crystalfp 1
  • tiClass: ti-invalid is not getting rendered

    tiClass: ti-invalid is not getting rendered

    Hey,

    The Problem

    I want to apply a tiClass via the before-adding-tag hook.

    The array is updated correctly:

    On the screenshot you can see the input field including the updated tags. (I also output the result, so you can see the tags array)

    Bildschirmfoto 2022-08-25 um 09 39 36

    If we inspect the html tho, ti-invalid has not been added to the class.

    Bildschirmfoto 2022-08-25 um 09 42 08

    Project setup

    Vue Version: 3.2.25

    Vue-Tags-Input Version: 3.0.4

    Thanks!

    opened by sven-ahrens 2
  • README Update

    README Update

    Thanks for this library, I found it after it being linked from the other repo as I needed Vue3 support.

    With the upgrade from Vue2 to Vue3 the slots syntax has changed and I feel the README.md should reflect those changes as a gotcha or note.

    Before I had

        <VueTagsInput
          v-model="user"
          :autocomplete-items="userResults"
          :add-only-from-autocomplete="true"
          @tags-changed="update"
          :placeholder="'Add User'"
        >
          <div slot="autocompleteItem"
               class="my-item"
               slot-scope="props"
               @click="props.performAdd(props.item)">
            {{ props.item.text }} ({{ props.item.rank }})
          </div>
        </VueTagsInput>
    

    This has now changed to

        <VueTagsInput
          v-model="user"
          :autocomplete-items="userResults"
          :add-only-from-autocomplete="true"
          @tags-changed="update"
          :placeholder="'Add User'"
        >
          <template #autocomplete-item="{performAdd, item}">
            <div @click="performAdd(item)">
              {{ item.text }} - {{ item.rank }}
            </div>
          </template>
        </VueTagsInput>
    

    As you can see the slot syntax changed quite a bit and the original documentation gives the wrong information.

    I just want to leave this as a note in case other people wonder how to upgrade from vue2 to vue3

    opened by 1e4 0
  • Feature request: first item selected as default

    Feature request: first item selected as default

    I wonder if you have some kind of first item selected, in a way that just an Enter key selected this first item of a list, like Raycast do when you focus at the app.

    opened by calebeaires 0
  • Props saveKeys not working

    Props saveKeys not working

    Hi,

    You did an amazing job porting it to Vue 3. It's working almost perfectly. I've found just a small bug: when I edit a tag, it's using the same keys used to add tags.

    image

    In the line 307 on file vue-tags-input.js, it should be 'saveOnKey' instead of 'addOnKey'. Could you adjust this, please?

    Thank you very much and congratulations again by the amazing job you did.

    opened by rrpatricio 0
Owner
Sinclair Chen
Product-oriented Full Stack Engineer. Alt accounts: @clarity-chen @sinclairity
Sinclair Chen
Vue Fake input is a Vue.js based component to create custom inputs for individual characters.

Vue Fake Input Vue Fake input is a Vue.js based component to create custom inputs for individual characters. Table of Contents Installation Usage Lice

Cláudio Luiz Castro 84 Jul 26, 2022
A custom input number component for Vue.js 2

vue-input-number A custom input number component for Vue.js 2. Install Yarn yarn add vue-input-number --dev NPM npm install vue-input-number --save-de

Jose Quintana 14 Jul 24, 2022
Vue Currency Input component allows an easy input of currency formatted numbers

Vue Currency Input The Vue Currency Input component allows an easy input of currency formatted numbers. It provides both standalone component (<curren

WeblineIndia 1 May 25, 2022
Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue.

Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue. Capable of formatting as the user types, including currency formatting. With no extra dependencies other than Vue itself.

Jack Steel 4 Dec 9, 2021
Input mask library for vue.js based on credit-card-input-mask

vue-restricted-input Input mask for vue.js based on credit-card-input-mask Why ? credit-card-input-mask perfect work with carriage position, fast. Ins

Ivan Demidov 11 Nov 21, 2021
Obtain AST by reading vue and react source code, and then dynamically add tags

Obtain AST by reading vue and react source code, and then dynamically add tags

沧海 3 Sep 27, 2021
Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!

label-edit Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let m

Myo Kyaw Htun 22 Apr 24, 2022
A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.

vue-otp-input A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API. Installation To install the la

Ejiro Asiuwhu 39 Sep 23, 2022
A Vue.js (>= 3.2) web component that wraps around an html input of type 'range' with label and styling options.

range-comp range-comp is Vue.js (>= 3.2) web component that wraps around an html input of type 'range' with label and styling options. range-comp can

null 0 May 9, 2022
Masked input component for Vue.js

Vue Masked Input Dead simple masked input component for Vue.js 2.X. Based on inputmask-core. Live Demo Install npm npm install vue-masked-input --save

null 452 Sep 3, 2022
Input field component to display a formatted currency value based on Vue.js

vue-numeric Input field component to display a formatted currency value based on Vue. Live Demo Works with Vue 2.* Installation Install via CDN <scrip

Kevin Ongko 420 Sep 24, 2022
A Vue.js component that wraps the awesome autoNumeric input formatter library

vue-autoNumeric A Vue.js component that wraps the awesome AutoNumeric input formatter library Get in touch on vue-autoNumeric wraps the awesome AutoNu

AutoNumeric 86 Sep 27, 2022
A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

Mayank 11 Jun 9, 2022
Split Input Component for Vue 3.x

Split Input Component for Vue 3.x Used for otps, transaction pin, passwords etc Install NPM npm i vue-split-input --save Yarn yarn add vue-split-inpu

Anjorin Damilare 6 Aug 8, 2022
Yet another Vue component for input masking

vue-input-mask Yet another Vue component for input masking. Based on react-input-mask. Demo Install yarn add vue-input-mask or npm i -S vue-input-mask

null 18 Jun 15, 2022
base on vue2.0+ verification code input component. (基于Vue2.0+的移动端验证码输入组件)

vue-input-code 基于Vue2.0+的移动端验证码输入组件. 功能预览 输入时回调 结果回调 自定义错误处理 自定义验证码个数 样式可控 这里是可爱的Demo 支持 支持 Vue.js 2.0+. 安装和使用 npm install vue-input-code --save 作为全局组

Obeta 66 Jan 10, 2022
Tiny (2k gzipped) and dependency free mask input for Vue.js

The Mask A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js Docs and Demo JsFiddle Install yarn add vue-the-mask o

Vue.js Tips 1.6k Sep 20, 2022
A lightweight and dependency free input masking library created specific for Vue

Vue Input Facade A lightweight and dependency free input masking library created specific for Vue Docs and Demo Installing npm i vue-input-facade yarn

Ronald Jerez 139 Sep 14, 2022
Simple zero-dependency input mask for Vue.js and vanilla JS.

Simple zero-dependency input mask for Vue.js and vanilla JS.

Alexander Shabunevich 451 Oct 6, 2022