{"id":15262,"library":"vue-autosuggest","title":"Vue Autosuggest Component","description":"Vue-autosuggest is a Vue.js component designed for building accessible autosuggest, autocomplete, and typeahead input fields. It is currently stable at version 2.2.0 and receives regular updates, often focusing on WAI-ARIA compliance and bug fixes, with new features introduced periodically. Key differentiators include its WAI-ARIA completeness, offering full control over rendering through custom components or built-in defaults, supporting multiple sections for suggestions, and being CSS-agnostic, giving developers complete styling freedom. It also facilitates easy integration with AJAX data fetching for dynamic suggestion lists. The component is rigorously tested and aims for a resilient architecture, providing a robust solution for interactive search inputs.","status":"active","version":"2.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/darrenjennings/vue-autosuggest","tags":["javascript","vue","autosuggest","autocomplete","enhanced input","typeahead","dropdown","select","combobox"],"install":[{"cmd":"npm install vue-autosuggest","lang":"bash","label":"npm"},{"cmd":"yarn add vue-autosuggest","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-autosuggest","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, required for the component to function as it's built for Vue 2.","package":"vue","optional":false}],"imports":[{"note":"Use named import for local component registration in Vue components.","wrong":"import VueAutosuggest from 'vue-autosuggest';","symbol":"VueAutosuggest (local)","correct":"import { VueAutosuggest } from 'vue-autosuggest';"},{"note":"For global registration via `Vue.use()`, the default export is typically used. CommonJS `require()` is not supported for modern Vue component usage.","wrong":"const VueAutosuggest = require('vue-autosuggest');","symbol":"VueAutosuggest (global)","correct":"import VueAutosuggest from 'vue-autosuggest';\nVue.use(VueAutosuggest);"},{"note":"While not explicitly documented, for TypeScript users, importing the type can be useful for strict checking, although the component itself is designed for Vue 2.","symbol":"VueAutosuggest (types)","correct":"import type { VueAutosuggest } from 'vue-autosuggest';"}],"quickstart":{"code":"import Vue from 'vue';\nimport { VueAutosuggest } from 'vue-autosuggest';\n\nVue.use(VueAutosuggest); // Register globally, or import locally into a component\n\nnew Vue({\n el: '#app',\n components: {\n VueAutosuggest\n },\n data() {\n return {\n query: '',\n selectedItem: null,\n suggestionsData: [{\n data: ['Frodo', 'Samwise', 'Gandalf', 'Galadriel', 'Faramir', 'Éowyn']\n }]\n };\n },\n methods: {\n onInputChange(input) {\n this.query = input;\n console.log('Input changed:', input);\n // In a real application, you would typically fetch suggestions from an API here\n // and update this.suggestionsData based on the input.\n },\n selectHandler(selected) {\n this.selectedItem = selected.item;\n console.log('Item selected:', selected.item);\n },\n clickHandler(event) {\n console.log('Input clicked:', event);\n },\n },\n template: `\n
\n

Vue Autosuggest Example

\n \n \n \n

Selected: {{ selectedItem }}

\n

Current input: {{ query }}

\n
\n `\n});","lang":"javascript","description":"This quickstart initializes a Vue app with the VueAutosuggest component, demonstrating basic setup with static suggestions, input handling, and selection. It showcases both global registration and local component usage patterns."},"warnings":[{"fix":"Migrate to `v-model` for input binding. Replace deprecated event listeners with `@input`, `@focus`, `@blur`, `@selected` (for item selection), `@opened`, and `@closed` (for suggestion list visibility).","message":"Version 2.0.0 introduced significant breaking changes, including built-in `v-model` support, which replaced the `initialValue` prop. Several old events (`onInputChange`, `onClick`, `onBlur`, `onFocus`, `onSelected`) were deprecated and removed in favor of more intuitive native `` events and new custom events.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Review custom CSS or JS that targets WAI-ARIA attributes (`role=\"combobox\"`, `aria-controls`) and adjust selectors to account for their new positions on wrapper elements. Rely on provided CSS classes for styling instead.","message":"Versions 2.2.0 and 2.1.2 implemented WAI-ARIA compliance updates, which involved moving `role=\"combobox\"` and `aria-controls` attributes from the input to a surrounding wrapper. If your styling or JavaScript relied on the precise location of these attributes, it might be affected.","severity":"gotcha","affected_versions":">=2.1.2"},{"fix":"Ensure that the `data` array within each suggestion object is never `null`. Filter out `null` data entries before passing them to the `suggestions` prop, or update to `v2.0.4` or newer.","message":"In versions prior to 2.0.4, providing `suggestions` data containing `null` values (e.g., `suggestions: [{data: null}]`) could lead to cryptic runtime errors.","severity":"gotcha","affected_versions":"<2.0.4"},{"fix":"Update to `v2.0.3` or newer to ensure `inputProps` reactivity. If updating is not an option, consider using a `key` prop on the `vue-autosuggest` component to force re-render when `inputProps` change.","message":"In versions prior to 2.0.3, the `inputProps` were not reactive, meaning changes to the `inputProps` object after initial rendering would not be reflected in the component's input element.","severity":"gotcha","affected_versions":"<2.0.3"},{"fix":"Update to `v2.0.1` or newer. If you cannot update, explicitly set `inputProps.autocomplete = 'off'` to enforce the behavior.","message":"In versions prior to 2.0.1, the `autocomplete=\"off\"` attribute set by default might be unset on subsequent re-renders, potentially causing browser autocomplete features to interfere with the autosuggest.","severity":"gotcha","affected_versions":"<2.0.1"}],"env_vars":null,"search_vec":"'2.2.0':27 'access':14 'agnost':77 'aim':102 'ajax':89 'also':84 'architectur':106 'aria':37,53 'autocomplet':16,118 'autosuggest':2,6,15,117 'bug':40 'build':13 'built':65 'built-in':64 'combobox':124 'complet':54,80 'complianc':38 'compon':3,10,62,97 'control':57 'css':76 'css-agnost':75 'current':23 'custom':61 'data':90 'default':67 'design':11 'develop':79 'differenti':48 'dropdown':122 'dynam':93 'easi':86 'enhanc':119 'facilit':85 'featur':44 'fetch':91 'field':20 'fix':41 'focus':33 'freedom':82 'full':56 'give':78 'includ':49 'input':19,114,120 'integr':87 'interact':112 'introduc':45 'javascript':115 'key':47 'list':95 'multipl':69 'new':43 'offer':55 'often':32 'period':46 'provid':107 'receiv':29 'regular':30 'render':59 'resili':105 'rigor':99 'robust':109 'search':113 'section':70 'select':123 'solut':110 'stabl':24 'style':81 'suggest':72,94 'support':68 'test':100 'typeahead':18,121 'updat':31 'version':26 'vue':1,5,116 'vue-autosuggest':4 'vue.js':9 'wai':36,52 'wai-aria':35,51","created_at":"2026-04-21T04:49:59.594990+00:00","updated_at":"2026-04-21T04:49:59.594990+00:00","problems":[{"fix":"Ensure that the `data` property of all suggestion objects is an array, even if empty, and not `null`. Upgrade to `vue-autosuggest@2.0.4` or higher to handle this gracefully.","cause":"The `suggestions` prop was provided with a structure where `data` within a suggestion object was `null`, e.g., `suggestions: [{ data: null }]`.","error":"Error: Cannot read properties of null (reading 'data')"},{"fix":"Update to `vue-autosuggest@2.0.3` or a newer version to enable reactivity for `inputProps`.","cause":"The `inputProps` object passed to the component was not reactive in older versions, preventing dynamic updates to the underlying input element's attributes.","error":"Input props (e.g., placeholder, id) are not updating when their values change."},{"fix":"Upgrade to `vue-autosuggest@2.1.1` or a newer version, which includes a fix that ensures unique keys for section slots.","cause":"In versions prior to 2.1.1, the `v-for` key used for rendering section slots might not have been unique, leading to incorrect re-rendering behavior.","error":"Section slots disappear or render incorrectly, especially after data updates."},{"fix":"Update to `vue-autosuggest@2.1.2` or later. These versions include fixes for ARIA attribute conformance, ensuring correct accessibility implementation.","cause":"Inconsistencies with the WAI-ARIA specification, particularly regarding attribute placement and element referencing, in versions prior to 2.1.2.","error":"ARIA warnings in the console about `aria-labelledby` referencing non-existent elements or `role='combobox'` being misplaced."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/darrenjennings/vue-autosuggest","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-autosuggest","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-20","install_tag":null}}