Gathering detailed insights and metrics for @mayank1513/vue-tag-input
Gathering detailed insights and metrics for @mayank1513/vue-tag-input
A versatile tag input component built with Vue 3 Composition API ⛺
Installations
npm install @mayank1513/vue-tag-inputDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
18.19.0
NPM Version
10.2.3
Releases
5
Languages
4
Vue
TypeScript
HTML
JavaScript
Vue (70.66%)
TypeScript (16.05%)
HTML (9.68%)
JavaScript (3.61%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
19 Stars
79 Commits
4 Forks
1 Watchers
4 Branches
1 Contributors
Updated on Aug 20, 2024
Sponsor this package
Maintainers
1
Package Meta Information
Latest Version
1.2.1
Package Id
@mayank1513/vue-tag-input@1.2.1
Unpacked Size
27.65 kB
Size
10.08 kB
File Count
7
NPM Version
10.2.3
Node Version
18.19.0
Published on
Jan 02, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
TagInput
A versatile tag input component built with Vue 3 Composition API.
Features
- ✅ No dependencies
- ✅ Input box stays focused - no need to re-focus the input => better UX
- ✅ Autocompletion
- ✅ Use arrow keys to navigate and enter key to select autocompleteItems
- ✅ Fast setup
- ✅ Customize tag validator
- ✅ Works with Vuex
- ✅ Small size: 1.6 kB gzipped
- ✅ Many customization options
- ✅ Delete tags on backspace / delete key
- ✅ Confirm before delete - tags turns red when backspace is pressed, gets deleted when backspace is pressed again
- ✅ Works well with copy & paste
- ✅ Excellent UX and accessibility
- ✅ Examples & Docs
Please read this article to learn how to build this package step by step and the background story.
To learn vue js please check out our courses Vue.js Complete Course + Guide and Vue 3 Essentials
Follow us on FaceBook to get the latest discount coupons and update to our articles and packages.
To keep it thin and performant we have chosen to provide only the minified version. Because, that's what you really need. In case you are looking for the full version build your own from this source code as per Build section.
live demo
Install
NPM
1npm i @mayank1513/vue-tag-input --production
or
1pnpm i @mayank1513/vue-tag-input --production
or
1yarn add @mayank1513/vue-tag-input --production
CDN
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/@mayank1513/vue-tag-input"></script>
<link rel="stylesheet" href="https://unpkg.com/@mayank1513/vue-tag-input@1.0.0/dist/style.css">
Usage
npm
1<template> 2 ... 3 <tag-input v-model="tags" /> 4 ... 5</template> 6 7<script> 8import TagInput from '@mayank1513/vue-tag-input' 9import '@mayank1513/vue-tag-input/style.css' 10... 11 12export default { 13 name: 'App', 14 data() { 15 return { 16 tags: [], 17 ... 18 }; 19 }, 20 components: { 21 TagInput, 22 ... 23 }, 24 ... 25} 26</script>
Detailed Docs available at (https://vue-tag-input.vercel.app)[https://vue-tag-input.vercel.app]
cdn
basic usage
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>Vue Tag Input Demo</title> 8 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> 9 <script src="https://unpkg.com/@mayank1513/vue-tag-input"></script> 10 <link 11 rel="stylesheet" 12 href="https://unpkg.com/@mayank1513/vue-tag-input@1.0.0/style.css" 13 /> 14 </head> 15 16 <body> 17 <div id="app"> 18 <tag-input></tag-input> 19 </div> 20 </body> 21 <script> 22 Vue.createApp({ 23 components: { 24 TagInput, 25 }, 26 }).mount("#app"); 27 </script> 28</html>
advanced usage
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>Document</title> 8 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> 9 <script src="https://unpkg.com/@mayank1513/vue-tag-input"></script> 10 <link 11 rel="stylesheet" 12 href="https://unpkg.com/@mayank1513/vue-tag-input@1.0.0/style.css" 13 /> 14 <style> 15 #app { 16 font-family: Avenir, Helvetica, Arial, sans-serif; 17 -webkit-font-smoothing: antialiased; 18 -moz-osx-font-smoothing: grayscale; 19 text-align: center; 20 color: #2c3e50; 21 margin-top: 60px; 22 max-width: 1400px; 23 margin: auto; 24 } 25 26 .main { 27 text-align: start; 28 } 29 </style> 30 </head> 31 32 <body> 33 <div id="app"> 34 <img 35 class="logo" 36 alt="Krishna Apps logo" 37 src="https://raw.githubusercontent.com/mayank1513/tag-input/master/src/assets/logo.png" 38 /> 39 <br /> 40 <h2>Presents</h2> 41 <h1>Vue Tag Input</h1> 42 <hr /> 43 <div class="main"> 44 <h1>Default options</h1> 45 <tag-input v-model="tags" /> 46 <br /> 47 <span 48 >Use <code>enter</code> key or <code>tab</code> key to create a new 49 tag.</span 50 > 51 <h1>With custom delimiter and colors</h1> 52 <tag-input 53 tagBgColor="lightgreen" 54 tagTextColor="darkgreen" 55 :customDelimiter="customDelimiter" 56 v-model="tags" 57 /> 58 <br /> 59 <span 60 >Use <code>enter</code> key or <code>tab</code> key or any of the 61 custom delimeters to create a new tag.</span 62 > 63 <p> 64 Custom delimiters: 65 <code v-for="delim in customDelimiter" :key="delim"> 66 "{{delim}}"</code 67 > 68 </p> 69 <br /> 70 <h1>Do not allow custom tags</h1> 71 <tag-input 72 :autocomplete-items="autocompleteItems" 73 validator="onlyAutocompleteItems" 74 tagBgColor="blue" 75 tagTextColor="lightblue" 76 :customDelimiter="customDelimiter" 77 v-model="tags" 78 /> 79 <br /> 80 Try entering tag that is not in autocompleteItems and hit 81 <code>enter</code> 82 <br /> 83 <span 84 >Use <code>enter</code> key or <code>tab</code> key or any of the 85 custom delimeters to create a new tag.</span 86 > 87 <p> 88 Allowed Tags: 89 <code v-for="tag in autocompleteItems" :key="tag"> "{{tag}}"</code> 90 </p> 91 <p> 92 Custom delimiters: 93 <code v-for="delim in customDelimiter" :key="delim"> 94 "{{delim}}"</code 95 > 96 </p> 97 <br /> 98 <h1> 99 Provide autocompleteItems for autofill but also allow custom tags 100 </h1> 101 <tag-input 102 :autocomplete-items="autocompleteItems" 103 tagBgColor="blue" 104 tagTextColor="lightblue" 105 :customDelimiter="customDelimiter" 106 v-model="tags" 107 /> 108 <br /> 109 <span 110 >Use <code>enter</code> key or <code>tab</code> key or any of the 111 custom delimeters to create a new tag.</span 112 > 113 <p> 114 Allowed Tags: 115 <code v-for="tag in autocompleteItems" :key="tag"> "{{tag}}"</code> 116 </p> 117 <p> 118 Custom delimiters: 119 <code v-for="delim in customDelimiter" :key="delim"> 120 "{{delim}}"</code 121 > 122 </p> 123 <br /> 124 </div> 125 </div> 126 127 <script> 128 Vue.createApp({ 129 data() { 130 return { 131 tags: [], 132 customDelimiter: [",", " "], 133 autocompleteItems: [ 134 "vue", 135 "composition", 136 "js", 137 "mytag1", 138 "mayank1513", 139 ], 140 }; 141 }, 142 components: { 143 TagInput, 144 }, 145 }).mount("#app"); 146 </script> 147 </body> 148</html>
Build
To build the example clone the repo git clone https://github.com/mayank1513/tag-input.git and run
npm i && npm run build
// or
pnpm i && npm run build
Contribute
Todo
- Update docs
Help us to help you more
- Please start this repo
- Follow us on FaceBook
- Upvote our helpful posts on StackOverflow
- Refer our courses to your colleagues, friends and business leaders
- Use our referrals to get advantage of special offers
- Open your free demat account with Groww
- Open your demat account with leading discount broker Zerodha
- Buy what you need on amzon.in using our refferal
- Buy what you need on amazon.com
- Donate for social cause. We are happy if you help anyone in need. It need not be only us!
- Want to learn business skills? Checkout Bada Business
Contribute for a Cause
License
Licensed as MIT open source. Copyright © 2023 Mayank Kumar Chaudhari
with 💖 by Mayank Kumar Chaudhari
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
0 existing vulnerabilities detected
Reason
Found 0/11 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: jobLevel 'contents' permission set to 'write': .github/workflows/npm.yml:13
- Warn: no topLevel permission defined: .github/workflows/npm.yml:1
- Warn: no topLevel permission defined: .github/workflows/test.yml:1
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/mayank1513/tag-input/npm.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/mayank1513/tag-input/npm.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/mayank1513/tag-input/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/mayank1513/tag-input/test.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/mayank1513/tag-input/test.yml/master?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/npm.yml:25
- Warn: npmCommand not pinned by hash: .github/workflows/test.yml:18
- Info: 0 out of 4 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
- Info: 0 out of 2 npmCommand dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 27 are checked with a SAST tool
Score
3.4
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More