A versetile tag input component built with Vue 3 Composition API

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>
You might also like...
Vue.js sound audio player base on Vuetify UI framework. Covers audio-tag API and adds more.

vuetify-audio Vue.js sound audio player base on Vuetify UI framework. Covers audio-tag API and adds more. Features Support most of audio play in this

Vue-api-client: The form tag for the 21st century

Vue-api-client: The form tag for the 21st century

Movie App Using Vue3 Composition API & Based on The MovieDB API

movie-app-vue Project Illustration (Light/Dark Modes) Video.mp4 Project setup yarn install Create .env file and add API_KEY variable token from the m

Movie App Using Vue3 Composition API & Based on The MovieDB API

movie-app-vue Project Illustration (Light/Dark Modes) Video.mp4 Project setup yarn install Create .env file and add API_KEY variable token from the m

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.

GitHub corner Icons built using Vue 3 (Vue 2 + Composition API) 🥳

V-Github-Icon GitHub corners made easy! This is on GitHub so let me know if I've b0rked it somewhere, give me a star ⭐ if you like it 🍻 Demo here -

E-Store built with Vue's Composition api script setup, mocked a server, vuex, vue-router

Frontend Mentor - E-commerce product page solution This is a solution to the E-commerce product page challenge on Frontend Mentor. Frontend Mentor cha

TodoMVC built with Vue 3 Composition Api and Vuex
TodoMVC built with Vue 3 Composition Api and Vuex

TodoMVC built with Vue 3 Composition Api and Vuex The well-known TodoMVC built with Vue 3 Composition Api and Vuex in a structured and testable way. E

📦 Fast, Simple, and Lightweight State Manager for Vue 3.0 built with composition API, inspired by Vuex.
📦 Fast, Simple, and Lightweight State Manager for Vue 3.0 built with composition API, inspired by Vuex.

v-bucket NPM STATUS: 📦 Fast, Simple, and Lightweight State Management for Vue 3.0 built with composition API, inspired by Vuex. Table of Contents Mai

Lightweight Vue 3 composition API-compatible store pattern library with built-in undo/redo functionality.

vue-store Lightweight Vue 3 composition API-compatible store pattern library. Offers a simple alternative that is on par with VueX in terms of feature

Built completely with Vue 3 using Composition API.
Built completely with Vue 3 using Composition API.

guessing-game-composition-api Live Demo https://brave-newton-ad1635.netlify.app/ For Options API Version: https://github.com/marccorpus/guessing-game-

Built with Vue3 Composition API, Navigation bar with Font-Awesome free icons, with Backdrop and Transitions.

Vue3 Navigation Bar Collapsable, Responsive, Backdrop and with Transition. Info Uses Vue3 Composition API to for the Navbar state. Uses Font-Awesome F

Vue Currency Input component allows an easy input of currency formatted numbers
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

A simple tag selector as a vue component.
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

A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html tag which isn't supported in most of the browsers)
A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html tag which isn't supported in most of the browsers)

Searchable-Select-Dropdown A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html t

Basic DataTable component for Vue3 in typescript and Composition API
Basic DataTable component for Vue3 in typescript and Composition API

Basic DataTable component for Vue3 in typescript and Composition API. It has basic functionality such as Filter/Search, pagination etc.

In this project, I created a cookie component using the vue3 composition api.
In this project, I created a cookie component using the vue3 composition api.

Vue-Cookie-Component 🛠️ Built With ✨ Live Version You can see the live version here. 🖋️ About In this project, I created a cookie component using th

A simple tag component with typeahead
A simple tag component with typeahead

v-tag-suggestion A simple tag component with typeahead ⌨️ Install via npm npm install vue-tag-suggestion Import and register where you want to use imp

International Telephone Input with Vue https://educationlink.github.io/vue-tel-input/
International Telephone Input with Vue https://educationlink.github.io/vue-tel-input/

vue-tel-input International Telephone Input with Vue. Documentation and live demo Visit the website Getting started Install the plugin: npm install vu

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 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 13 Nov 24, 2022
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 454 Dec 24, 2022
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 Nov 24, 2022
: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 38 Dec 14, 2022
A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

Mayank 12 Oct 12, 2022
A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

Mayank 12 Oct 12, 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 41 Nov 4, 2022
REST Countries API with color theme switcher is one of the Frontend Mentor challenges. It uses Composition API for Vue.js 3 and pulls data from the REST Countries API.

REST Countries API REST Countries API with color theme switcher is one of the Frontend Mentor challenges. It uses Composition API for Vue.js 3 and pul

Gizem Korkmaz 7 Sep 5, 2022
: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 542 Oct 9, 2022
Rick-and-morty-vue - App web de Rick And Morty utilizando Vue 3 - Composition API, Vuex, API Rest

Rick And Morty utilizando Vue 3 - Composition API, Vuex, API Rest Project setup npm install Compiles and hot-reloads for development npm run serve C

Luis Timaná 0 Jan 1, 2022