Registry / web-framework / vue-typeahead-bootstrap

vue-typeahead-bootstrap

library2.12.0jsnpmunverified

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.

web-framework

npm install vue-typeahead-bootstrap

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-TYPEAHEAD-BOOT

vue-typeahead-bootstrap

web-frameworkjavascriptv2.12.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueTypeaheadBootstrap

✓ import VueTypeaheadBootstrap from 'vue-typeahead-bootstrap';

✗ const VueTypeaheadBootstrap = require('vue-typeahead-bootstrap');

Primarily consumed as an ES module. For global registration, import and then `Vue.component('vue-typeahead-bootstrap', VueTypeaheadBootstrap)`.

Component Registration

✓ import Vue from 'vue'; import VueTypeaheadBootstrap from 'vue-typeahead-bootstrap'; Vue.component('vue-typeahead-bootstrap', VueTypeaheadBootstrap);

✗ Vue.use(VueTypeaheadBootstrap);

The library exports a single component, not a Vue plugin. It needs to be registered as a component.

Local Component Import

✓ import VueTypeaheadBootstrap from 'vue-typeahead-bootstrap'; export default { components: { VueTypeaheadBootstrap }, // ... }

✗ import { VueTypeaheadBootstrap } from 'vue-typeahead-bootstrap';

The component is exported as a default export, not a named export. It's common to import it locally within a component.

Demonstrates global registration of the VueTypeaheadBootstrap component, rendering it in a basic Vue application, and binding data.

import Vue from 'vue'; import App from './App.vue'; import 'bootstrap/dist/css/bootstrap.min.css'; // Ensure Bootstrap CSS is loaded import VueTypeaheadBootstrap from 'vue-typeahead-bootstrap'; Vue.component('vue-typeahead-bootstrap', VueTypeaheadBootstrap); new Vue({ el: '#app', template: ` <div id="app" class="container mt-5"> <h1>Search Countries</h1> <vue-typeahead-bootstrap v-model="selectedCountry" :data="countries" placeholder="Type a country..." @hit="countrySelected" size="lg" ></vue-typeahead-bootstrap> <p v-if="selectedCountry" class="mt-3">Selected: {{ selectedCountry }}</p> </div> `, data() { return { selectedCountry: null, countries: [ 'United States', 'Canada', 'Mexico', 'Brazil', 'Argentina', 'United Kingdom', 'France', 'Germany', 'Italy', 'Spain', 'China', 'India', 'Japan', 'Australia', 'South Africa' ] }; }, methods: { countrySelected(item) { console.log('Selected item:', item); } } });

Debug

Known issues

breakingMigration 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`.

fix

Globally find and replace `vue-bootstrap-typeahead` with `vue-typeahead-bootstrap` and `VueBootstrapTypeahead` with `VueTypeaheadBootstrap` in your project.

affects: <2.0

gotchaThis 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.

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.

affects: >=2.0

gotchaThe component is a default export, so destructuring imports (e.g., `import { VueTypeaheadBootstrap } from '...'`) will fail, resulting in `undefined`.

fix

Always use `import VueTypeaheadBootstrap from 'vue-typeahead-bootstrap';` for importing the component.

affects: >=2.0

Errors

Common errors & fixes

Error in render: 'component' is not defined

The component was not properly registered or imported as a default export.

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.

TypeError: Cannot read properties of undefined (reading 'extend')

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.

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.

Upgrade

Version history

2.12.0latest on npm

Audit

Dependencies

vuerequiredRuntime dependency for the Vue.js component.

bootstraprequiredStyles and potentially JS for Bootstrap 4. The component is styled with Bootstrap 4 classes.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/mattzollinhofer/vue-typeahead-bootstrap ↗

packagehttps://www.npmjs.com/package/vue-typeahead-bootstrap ↗