The issue

While working on a recent internal project, I ran into a limitation with Vuetify 3’s v-autocomplete. I implemented a multi-select autocomplete component to allow users to add their tags, but I realized the old allow-new prop was missing. Here's how I worked around it.

The component had to provide a list of routes where we could attach and save translations for the selected routes.

Vuetify’s v-autocomplete component is powerful for building tag-input fields — but as of Vuetify 3, it no longer provides a built-in allow-new prop to add custom values.

In this brief tutorial, I try to show a solution for these requirements:

• Need to allow users to select multiple values with chips.
• Need to be able to add new, custom tags not present in the original list.
• Need to maintain a clean and intuitive user experience using the Vue 3 Composition API.

Use Case

Imagine a tagging system where users can either:

• Pick from a predefined list of tags
• Or type in a new one and press Enter to add it

This problem is a common requirement in blog platforms, CMSs, or project labelers. Let's check how we can do it.

The Working Solution

<template>
  <v-autocomplete
      v-model="selectedItems"
      :items="items"
      label="Add or select items"
      multiple
      chips
      closable-chips
      :search="search"                    <!-- ← Bind the search input -->
  @update:search="val => search = val"    <!-- ← Sync the search string -->
  @keydown.enter="addNewItem"             <!-- ← Handle the custom entry on Enter -->
  />
</template>

<script setup>
  import { ref } from 'vue'

  const items = ref(['Vue', 'Vuetify', 'JavaScript'])
  const selectedItems = ref([])
  const search = ref('') // ← Holds the current search string

  function addNewItem() { // ← Triggered on Enter
    const trimmed = search.value.trim()
    if (trimmed && !items.value.includes(trimmed)) {
      items.value.push(trimmed) // ← Add to available options
    }
    if (trimmed && !selectedItems.value.includes(trimmed)) {
      selectedItems.value.push(trimmed) // ← Add to a selected list
    }
    search.value = '' // ← Reset input field
  }
</script>

The conclusion

The component combines both selection from existing options and the ability to add new custom entries, making it flexible for use cases like tagging systems.