{"id":12614,"library":"vue-typeahead-bootstrap","title":"Vue.js Typeahead/Autocomplete for Bootstrap 4","description":"Vue Typeahead Bootstrap is an autocomplete component for Vue 2 applications, specifically designed to integrate with Bootstrap 4's styling and utility classes. It provides a `list-group` based interface for suggestions, supporting features like custom suggestion slots and event emission for focus/blur. The project is currently at version 2.12.0, with recent releases indicating ongoing maintenance and minor feature enhancements (e.g., v2.13.0 recently). It serves as a spiritual successor to the `vue-bootstrap-typeahead` project, which lost its maintainer, ensuring continued support for users requiring a Bootstrap 4 compatible typeahead in their Vue 2 applications. Its primary differentiators are its strong coupling with Bootstrap 4 and its dedicated support for Vue 2, making it a suitable choice for legacy projects or those specifically constrained to these versions.","status":"active","version":"2.12.0","language":"javascript","source_language":"en","source_url":"https://github.com/mattzollinhofer/vue-typeahead-bootstrap","tags":["javascript","vue","autocomplete","bootstrap","bootstrap 4","omnisearch","typeahead"],"install":[{"cmd":"npm install vue-typeahead-bootstrap","lang":"bash","label":"npm"},{"cmd":"yarn add vue-typeahead-bootstrap","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-typeahead-bootstrap","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for the Vue.js component.","package":"vue","optional":false},{"reason":"Styles and potentially JS for Bootstrap 4. The component is styled with Bootstrap 4 classes.","package":"bootstrap","optional":false}],"imports":[{"note":"Primarily consumed as an ES module. For global registration, import and then `Vue.component('vue-typeahead-bootstrap', VueTypeaheadBootstrap)`.","wrong":"const VueTypeaheadBootstrap = require('vue-typeahead-bootstrap');","symbol":"VueTypeaheadBootstrap","correct":"import VueTypeaheadBootstrap from 'vue-typeahead-bootstrap';"},{"note":"The library exports a single component, not a Vue plugin. It needs to be registered as a component.","wrong":"Vue.use(VueTypeaheadBootstrap);","symbol":"Component Registration","correct":"import Vue from 'vue';\nimport VueTypeaheadBootstrap from 'vue-typeahead-bootstrap';\n\nVue.component('vue-typeahead-bootstrap', VueTypeaheadBootstrap);"},{"note":"The component is exported as a default export, not a named export. It's common to import it locally within a component.","wrong":"import { VueTypeaheadBootstrap } from 'vue-typeahead-bootstrap';","symbol":"Local Component Import","correct":"import VueTypeaheadBootstrap from 'vue-typeahead-bootstrap';\n\nexport default {\n components: {\n VueTypeaheadBootstrap\n },\n // ...\n}"}],"quickstart":{"code":"import Vue from 'vue';\nimport App from './App.vue';\nimport 'bootstrap/dist/css/bootstrap.min.css'; // Ensure Bootstrap CSS is loaded\nimport VueTypeaheadBootstrap from 'vue-typeahead-bootstrap';\n\nVue.component('vue-typeahead-bootstrap', VueTypeaheadBootstrap);\n\nnew Vue({\n el: '#app',\n template: `\n
\n

Search Countries

\n \n

Selected: {{ selectedCountry }}

\n
\n `,\n data() {\n return {\n selectedCountry: null,\n countries: [\n 'United States', 'Canada', 'Mexico', 'Brazil', 'Argentina',\n 'United Kingdom', 'France', 'Germany', 'Italy', 'Spain',\n 'China', 'India', 'Japan', 'Australia', 'South Africa'\n ]\n };\n },\n methods: {\n countrySelected(item) {\n console.log('Selected item:', item);\n }\n }\n});","lang":"javascript","description":"Demonstrates global registration of the VueTypeaheadBootstrap component, rendering it in a basic Vue application, and binding data."},"warnings":[{"fix":"Globally find and replace `vue-bootstrap-typeahead` with `vue-typeahead-bootstrap` and `VueBootstrapTypeahead` with `VueTypeaheadBootstrap` in your project.","message":"Migration from versions prior to 2.0 requires renaming references. The package name changed from `vue-bootstrap-typeahead` to `vue-typeahead-bootstrap`, and the component name changed from `VueBootstrapTypeahead` to `VueTypeaheadBootstrap`.","severity":"breaking","affected_versions":"<2.0"},{"fix":"Ensure your project is running Vue 2 and Bootstrap 4. For Vue 3 or Bootstrap 5, consider alternative typeahead components built for those ecosystems.","message":"This component is built for Vue 2 and Bootstrap 4. It is not directly compatible with Vue 3 or Bootstrap 5 without significant adaptation or a different component library.","severity":"gotcha","affected_versions":">=2.0"},{"fix":"Always use `import VueTypeaheadBootstrap from 'vue-typeahead-bootstrap';` for importing the component.","message":"The component is a default export, so destructuring imports (e.g., `import { VueTypeaheadBootstrap } from '...'`) will fail, resulting in `undefined`.","severity":"gotcha","affected_versions":">=2.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `import VueTypeaheadBootstrap from 'vue-typeahead-bootstrap';` is used and the component is registered either globally via `Vue.component` or locally within the `components` option of a Vue component.","cause":"The component was not properly registered or imported as a default export.","error":"Error in render: 'component' is not defined"},{"fix":"Verify your build configuration ensures Vue is correctly resolved and that `vue-typeahead-bootstrap` is imported as an ES module. If using CommonJS, ensure transpilation handles the default export correctly.","cause":"Commonly occurs when Vue is not correctly bundled or accessible, or when the component attempts to use Vue functionality before Vue is properly initialized. Could also indicate a CJS/ESM mismatch in a build environment.","error":"TypeError: Cannot read properties of undefined (reading 'extend')"}],"ecosystem":"npm"}