Vue.js Typeahead/Autocomplete for Bootstrap 4

Common errors

• Error in render: 'component' is not defined

  cause 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')

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

Warnings

• breaking 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`.
  Fix: Globally find and replace `vue-bootstrap-typeahead` with `vue-typeahead-bootstrap` and `VueBootstrapTypeahead` with `VueTypeaheadBootstrap` in your project.
• gotcha 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.
  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.
• gotcha The 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.

Install

• npm install vue-typeahead-bootstrap npm
• yarn add vue-typeahead-bootstrap yarn
• pnpm add vue-typeahead-bootstrap pnpm

Imports

• VueTypeaheadBootstrap
  wrong:

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

  correct:

  import VueTypeaheadBootstrap from 'vue-typeahead-bootstrap';

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

  Vue.use(VueTypeaheadBootstrap);

  correct:

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

  The library exports a single component, not a Vue plugin. It needs to be registered as a component.
• Local Component Import
  wrong:

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

  correct:

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

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

Quickstart

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);
    }
  }
});