Thanks for this component! I have it just at the bottom of the application window. So the autocomplete list is not visible. The list is there, because if I enter a letter a one pixel line appears under the component and if I click here, a tag will be entered. Is there a way to move it above the component? Thanks! mario

Hi, in vue 3 there is no Vue.use() it is done via:

import { createApp } from 'vue'

const app = createApp({})

app.use(myPlugin)

So this just makes sure there is a .use() available before trying to call it...

Hey,

The Problem

I want to apply a tiClass via the before-adding-tag hook.

The array is updated correctly:

On the screenshot you can see the input field including the updated tags. (I also output the result, so you can see the tags array)

If we inspect the html tho, ti-invalid has not been added to the class.

Project setup

Vue Version: 3.2.25

Vue-Tags-Input Version: 3.0.4

Thanks!

Thanks for this library, I found it after it being linked from the other repo as I needed Vue3 support.

With the upgrade from Vue2 to Vue3 the slots syntax has changed and I feel the README.md should reflect those changes as a gotcha or note.

Before I had

    <VueTagsInput
      v-model="user"
      :autocomplete-items="userResults"
      :add-only-from-autocomplete="true"
      @tags-changed="update"
      :placeholder="'Add User'"
    >
      <div slot="autocompleteItem"
           class="my-item"
           slot-scope="props"
           @click="props.performAdd(props.item)">
        {{ props.item.text }} ({{ props.item.rank }})
      </div>
    </VueTagsInput>

This has now changed to

    <VueTagsInput
      v-model="user"
      :autocomplete-items="userResults"
      :add-only-from-autocomplete="true"
      @tags-changed="update"
      :placeholder="'Add User'"
    >
      <template #autocomplete-item="{performAdd, item}">
        <div @click="performAdd(item)">
          {{ item.text }} - {{ item.rank }}
        </div>
      </template>
    </VueTagsInput>

As you can see the slot syntax changed quite a bit and the original documentation gives the wrong information.

I just want to leave this as a note in case other people wonder how to upgrade from vue2 to vue3

I wonder if you have some kind of first item selected, in a way that just an Enter key selected this first item of a list, like Raycast do when you focus at the app.

Hi,

You did an amazing job porting it to Vue 3. It's working almost perfectly. I've found just a small bug: when I edit a tag, it's using the same keys used to add tags.

In the line 307 on file vue-tags-input.js, it should be 'saveOnKey' instead of 'addOnKey'. Could you adjust this, please?

Thank you very much and congratulations again by the amazing job you did.