Vue Bootstrap Typeahead

screenshot of Vue Bootstrap Typeahead
vue
bootstrap
scss

Vue Bootstrap Typeahead

An autocomplete/typeahead component for Vue 2 and Bootstrap 4

Overview

The Vue-Bootstrap-Typeahead is an autocomplete/typeahead component built with Bootstrap 4 and Vue 2. It provides a simple list-group based typeahead functionality for better user experience. This project is no longer actively maintained but offers useful features for implementing autocomplete functionality in web applications.

Features

  • List-group based typeahead: Utilizes Bootstrap 4 for styling and Vue 2 for functionality.
  • Easy installation: Available on NPM with minified UMD and CommonJS builds.
  • Customizable appearance: Allows configuration of input-group size, background color, text color, and more.
  • Data handling: Works with already loaded API responses in array format for flexibility.
  • Event handling: Provides events like hit when an autocomplete item is selected and input for two-way binding with v-model.
  • Slots support: Offers prepend and append slots for customizing the appearance with buttons or other markup.
  • Scoped slots: Allows the use of a scoped slot called suggestion for defining custom content for suggestion list items.
vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

bootstrap
Bootstrap

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.