Smart-TagzSmart Input Tags for Vue 3

Quick Start ​

Install via npm:

npm install smart-tagz

Use in your Vue 3 application:

<template>
  <smart-tagz
    input-placeholder="Enter tags..."
    autosuggest
    :sources="languages"
    @on-changed="handleTagsChanged"
  />
</template>

<script setup>
import SmartTagz from 'smart-tagz'
import 'smart-tagz/dist/smart-tagz.css'

const languages = ['JavaScript', 'Vue.js', 'TypeScript', 'React', 'Python']

const handleTagsChanged = (tags) => {
  console.log('Selected tags:', tags)
}
</script>

Why Smart-Tagz? ​

• Smart Matching: Fuzzy search with threshold-based matching finds what you're looking for
• Accessible: Built from the ground up for accessibility with full keyboard support
• Modern: Built with Vue 3 Composition API and TypeScript
• Lightweight: Minimal dependencies, fast performance
• Tested: 314+ unit tests with 87%+ coverage
• Well Documented: Interactive examples and comprehensive guides

Features at a Glance ​

✨ v0.5.0 includes:

• Intelligent fuzzy matching (fuse.js)
• Full keyboard navigation (arrows, Home/End, Tab)
• Screen reader announcements
• Real-time error handling
• Mobile-first design
• Error feedback with auto-dismiss
• Tag editing and deletion
• Paste support with custom delimiters

Interactive Demo ​

Try Smart-Tagz right here:

Community ​

• 📖 Documentation
• 🐛 Report Issues
• 💬 Discussions
• ⭐ GitHub

License ​

MIT © 2024 Prabhu Murthy