← Examples

taga11y — Vue

The first-party <Taga11yInput> component from taga11y/vue, bound with v-model (modelValue / update:modelValue). Peer dependency: Vue 3.

Use v-model (controlled) or defaultValue (uncontrolled). Emits add, remove, clear, change, paste, destroy; the instance is reachable via a template ref (expose()).

<script setup>
import { ref } from 'vue';
import { Taga11yInput } from 'taga11y/vue';
import 'taga11y/dist/taga11y.css';

const tags = ref(['JavaScript']);
</script>

<template>
  <Taga11yInput
    id="vue-tags"
    v-model="tags"
    :suggestions="['JavaScript', 'TypeScript', 'Rust', 'Go', 'Python', 'Elixir']"
    :max-tags="5"
  />
</template>