Vue Custom Google Autocomplete screenshot

Vue Custom Google Autocomplete

Author Avatar Theme by Damienroche
Updated: 10 Oct 2019
33 Stars

Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...

Categories

Overview:

The vue-custom-google-autocomplete is a powerful tool designed for Vue.js developers looking to enhance the user experience of their applications with Google Place Autocomplete functionality. This renderless component simplifies the process of integrating Google’s place recommendations without imposing any default styles, offering flexibility to work with various frameworks. With an easy npm installation, you can quickly incorporate this feature into your project, provided you have Vue.js 2.0 or higher and a valid Google Place API key.

This component is not only straightforward to set up but also offers a range of customizable options and events to fine-tune the behavior to suit the needs of your application. Whether you want to customize the loading or no results text, or focus the input programmatically, this component adapts to your preferences seamlessly.

Features:

  • Renderless Component: Comes without default CSS, allowing you to style it as needed for any project or framework.
  • Google API Integration: Requires a Google Place API key for seamless integration and access to place recommendations.
  • Customizable Options: Modify behavior with props such as deepSearch, debounceTime, and focus to enhance user interaction.
  • Event Handling: An @select event triggers when a user selects a prediction, providing detailed location data.
  • Flexible Templates: Customize the results display using slot-scope to create your own template for better user experience.
  • Pre-configured Components: Easily use Bulma or Bootstrap dropdown markups for quick setup without extensive coding.
  • Optional Parameters: Refine predictions based on location, language, and other parameters to deliver tailored results to users.