Tags Input using Vue 3, Tailwind & TypeScript

In this article, we will explore how to create a tags input component using Vue 3, Tailwind CSS, and TypeScript. The tags input will allow users to add tags by pressing the enter key and remove tags by using the backspace key.

Setting up the project

First, we need to create a new project and install the required dependencies. We can do this using the Vue CLI and the following commands:

    
    $ vue create tags-input
    $ cd tags-input
    $ npm install vue@next vue-tsc typescript @headlessui/vue @heroicons/vue @vue/cli-plugin-typescript tailwindcss
    $ npx tailwindcss init -p
    
    

Creating the TagsInput component

Next, we can create the TagsInput component that will handle the addition and removal of tags. We can define the component in a new file called TagsInput.vue:

    
      <template>
        <div>
          <div class="flex flex-wrap items-center gap-2 p-2 border border-gray-300 rounded-md">
            <div v-for="(tag, index) in tags" :key="index" class="bg-blue-500 text-white px-2 py-1 rounded-md">
              {{ tag }}
              <button @click="removeTag(index)" class="ml-2">x</button>
            </div>
          </div>
          <input v-model="input" @keydown.enter="addTag" @keydown.backspace="removeLastTag" type="text" class="w-full p-2 mt-2 border border-gray-300 rounded-md">
        </div>
      </template>
    
    

In this component, we have a list of tags displayed as buttons. We also have an input field where users can type new tags. We handle the addition and removal of tags using the addTag and removeTag methods.

Initializing the component in the App.vue file

Finally, we can use the TagsInput component in our main App.vue file:

    
      <template>
        <div class="p-8">
          <h1 class="text-2xl font-bold mb-4">Tags Input</h1>
          <tags-input />
        </div>
      </template>

      <script setup>
        import TagsInput from './TagsInput.vue';

        export default {
          components: {
            TagsInput
          }
        };
      </script>
    
    

With this setup, we now have a working tags input component that allows users to add tags by pressing enter and remove tags by using the backspace key. We can further customize the appearance and behavior of the component using Tailwind CSS and TypeScript.

Conclusion

In this article, we have explored how to create a tags input component using Vue 3, Tailwind CSS, and TypeScript. The tags input component allows users to easily add and remove tags using familiar keyboard shortcuts, making it a convenient and user-friendly input option.