A versetile tag input component built with Vue 3 Composition API

Related tags

tag-input
Overview

TagInput

tag-input.gif

A versetile tag input component built with Vue 3 Composition API.

live demo

Please checkout our Vue JS course Use code HAPPY_LEARNING or get in touch for additional discounts

Install

npm

npm i @mayank1513/tag-input

or

pnpm i @mayank1513/tag-input

or

yarn add @mayank1513/tag-input

cdn

    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://unpkg.com/@mayank1513/tag-input"></script>
    <link rel="stylesheet" href="https://unpkg.com/@mayank1513/[email protected]/dist/TagInput.css">

Usage

npm

<template>
    ...
    <tag-input v-model="tags" />
    ...
</template>

<script>
import TagInput from '@mayank1513/tag-input'
import '@mayank1513/tag-input/dist/TagInput.css'
...

export default {
  name: 'App',
  data() {
    return {
      tags: [],
      ...
    };
  },
  components: {
    TagInput,
    ...
  },
  ...
}
</script>

cdn

basic usage

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://unpkg.com/@mayank1513/tag-input"></script>
    <link rel="stylesheet" href="https://unpkg.com/@mayank1513/[email protected]/dist/TagInput.css">
</head>

<body>
    <div id="app">
        <tag-input></tag-input>
    </div>
</body>
<script>
    Vue.createApp({
        components: {
            TagInput
        }
    }).mount('#app')
</script>

</html>

advanced usage

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://unpkg.com/@mayank1513/vue-tag-input"></script>
    <link rel="stylesheet" href="https://unpkg.com/@mayank1513/[email protected]/dist/TagInput.css">
    <style>
        #app {
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-align: center;
            color: #2c3e50;
            margin-top: 60px;
            max-width: 1400px;
            margin: auto;
        }
        
        .main {
            text-align: start;
        }
    </style>
</head>

<body>
    <div id="app">
        <img class="logo" alt="Krishna Apps logo" src="https://raw.githubusercontent.com/mayank1513/tag-input/master/src/assets/logo.png" />
        <br />
        <h2>Presents</h2>
        <h1>Vue Tag Input</h1>
        <hr />
        <div class="main">
            <h1>Default options</h1>
            <tag-input v-model="tags" />
            <br />
            <span>Use <code>enter</code> key or <code>tab</code> key to create a new tag.</span>
            <h1>With custom delimiter and colors</h1>
            <tag-input tagBgColor="lightgreen" tagTextColor="darkgreen" :customDelimiter="customDelimiter" v-model="tags" />
            <br>
            <span>Use <code>enter</code> key or <code>tab</code> key or any of the custom delimeters to create a new
                tag.</span>
            <p>Custom delimiters: <code v-for="delim in customDelimiter" :key="delim"> "{{delim}}"</code></p>
            <br>
            <h1>Do not allow custom tags</h1>
            <tag-input :options="options" :allowCustom="false" tagBgColor="blue" tagTextColor="lightblue" :customDelimiter="customDelimiter" v-model="tags" />
            <br> Try entering tag that is not in options and hit <code>enter</code>
            <br>
            <span>Use <code>enter</code> key or <code>tab</code> key or any of the custom delimeters to create a new
                tag.</span>
            <p>Allowed Tags: <code v-for="tag in options" :key="tag"> "{{tag}}"</code></p>
            <p>Custom delimiters: <code v-for="delim in customDelimiter" :key="delim"> "{{delim}}"</code></p>
            <br>
            <h1>Provide options for autofill but also allow custom tags</h1>
            <tag-input :options="options" tagBgColor="blue" tagTextColor="lightblue" :customDelimiter="customDelimiter" v-model="tags" />
            <br>
            <span>Use <code>enter</code> key or <code>tab</code> key or any of the custom delimeters to create a new
                tag.</span>
            <p>Allowed Tags: <code v-for="tag in options" :key="tag"> "{{tag}}"</code></p>
            <p>Custom delimiters: <code v-for="delim in customDelimiter" :key="delim"> "{{delim}}"</code></p>
            <br>
        </div>
    </div>

    <script>
        Vue.createApp({
            data() {
                return {
                    tags: [],
                    customDelimiter: [',', ' '],
                    options: ['vue', 'composition', 'js', 'mytag1', 'mayank1513']
                };
            },
            components: {
                TagInput
            }
        }).mount('#app')
    </script>
</body>

</html>
Releases(v0.0.3)
Owner
Mayank
Passionate Developer and Researcher. Coming from academic and research background, and actively involved in designing simulation tools and app development.
Mayank
A simple tags input with typeahead (autocomplete) built with Vue.js 2.

Voerro Vue Tags Input v2 A simple tags input with typeahead built with Vue.js 2. Live Demo Installation via NPM npm i @voerro/vue-tagsinput --save-dev

Voerro 410 Jul 19, 2021
:bookmark: Vue.js 2.0 Input Tag Component

vue-input-tag A Vue.js 2.0 input tag component inspired in react-tagsinput Installation NPM / Yarn npm install vue-input-tag --save yarn add vue-input

Mati Tucci 520 Jun 10, 2021
A simple tag selector as a vue component.

Vue-tag-selector is a component for vuejs for tag type fields. Light (6.3kb gzipped) and customizable. Offering regex validation. Check out the demo I

Tom Quinonero 14 Mar 4, 2021
🏞 A graceful image type inputer / uploader

点击ζŸ₯ηœ‹δΈ­ζ–‡ζ–‡ζ‘£ | Have a glance at Demo Intro <input type="file" /> like, only support single image auto-upload support drop-select / preview / use as <img /

Bruce Weng 554 Jul 5, 2021
An image input preview component in vuejs2

Vue-img-preview This is a minimal image preview implementation that does only one thing; give users feedback by showing image chosen from a file input

Dammy 18 Apr 20, 2021
:camera: Tiny little component for input type=file (css free! style it as you want!)

v-image ?? This is on GitHub so let me know if I've b0rked it somewhere, give me a star ⭐ if you like it ?? Demo here -> v-image βœ… Install ?? npm i v-

Vinayak Kulkarni 35 Jul 10, 2021
:sparkles: A flexible, highly available district picker for picking provinces, cities and districts of China.

A flexible, highly available district selector for picking provinces, cities and districts of China. V - Distpicker Here is documents Installation npm

Jiajian Chan 937 Jul 16, 2021