damienrochedamienroche
33

Vue Custom Google Autocomplete

screenshot of Vue Custom Google Autocomplete
vue
bootstrap
bulma
scss

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

Github

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

bulma
Bulma

Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.

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.

Pug

Pug is a high-performance template engine for Node.js and browsers that enables developers to write HTML templates using a concise and intuitive syntax. It supports a range of features, including template inheritance, conditionals, loops, mixins, and more, and can be easily integrated into a variety of web frameworks and build tools.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.