{"id":24144555,"url":"https://github.com/damienroche/vue-custom-google-autocomplete","last_synced_at":"2025-09-19T12:32:37.719Z","repository":{"id":35132816,"uuid":"210885789","full_name":"damienroche/vue-custom-google-autocomplete","owner":"damienroche","description":"🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...","archived":false,"fork":false,"pushed_at":"2022-12-11T07:10:47.000Z","size":2040,"stargazers_count":33,"open_issues_count":26,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-15T13:49:55.666Z","etag":null,"topics":["autocomplete","bootstrap4","bulma","google-places-api","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/damienroche.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-25T16:01:04.000Z","updated_at":"2023-12-01T07:15:08.000Z","dependencies_parsed_at":"2023-01-15T14:30:37.379Z","dependency_job_id":null,"html_url":"https://github.com/damienroche/vue-custom-google-autocomplete","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damienroche%2Fvue-custom-google-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damienroche%2Fvue-custom-google-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damienroche%2Fvue-custom-google-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damienroche%2Fvue-custom-google-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/damienroche","download_url":"https://codeload.github.com/damienroche/vue-custom-google-autocomplete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233570547,"owners_count":18695866,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autocomplete","bootstrap4","bulma","google-places-api","vue"],"created_at":"2025-01-12T06:12:11.566Z","updated_at":"2025-09-19T12:32:37.028Z","avatar_url":"https://github.com/damienroche.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-custom-google-autocomplete\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./img/vue-custom-google-autocomplete.png\" alt=\"Custom Google Autcomplete using Place API\"\u003e\n\u003c/p\u003e\n\n## Installation\n\nYou need [Vue.js](https://vuejs.org/) **version 2.0+** and an [Google PLACE API](https://developers.google.com/places/web-service/get-api-key) key. This plugin is a renderless component. It comes without any css as the main goal is to use it with differents frameworks.\n\nIf you looking for framework oriented components, you can import them separately (see ***pre-configured*** section)\nPR are welcome for other components\n\n### Install via npm\n\n```bash\nnpm install vue-custom-google-autocomplete\nyarn add vue-custom-google-autocomplete\n```\n\n### Import and use\n\nNote: if you want a specific preconfigured component, skit this step and import it as a simple component (see ***pre-configured*** section)\n\n```javascript\nimport Vue from 'vue'\nimport CustomGoogleAutocomplete from 'vue-custom-google-autocomplete'\n\n...\n\nVue.use(CustomGoogleAutocomplete)\n```\n\n```vue\n\u003ctemplate\u003e\n  \u003ccustom-google-autocomplete :options=\"options\" @select=\"selected = $event)\")\n    \u003cdiv slot-scope=\"{ inputAttrs, inputEvents, loading, results, query, selectPrediction, hasResults }\"\u003e\n      \u003cinput type=\"search\" v-bind=\"inputAttrs\" v-on=\"inputEvents\" /\u003e\n      \u003cdiv v-for=\"(prediction, index) in results\" :key=\"'prediction-' + index\" @click=\"selectPrediction(prediction)\"\u003e\n        {{ prediction.description }}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/custom-google-autocomplete\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data() {\n    return {\n      selected: null\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n\n\n## Props\n\n| Name          | Type    | Default                                         | Description                                            |\n|---------------|---------|-------------------------------------------------|--------------------------------------------------------|\n| `options`     | Object  | see options section                             | Plugin options (see options section)                   |\n\nYou can also pass all props available on an input (placeholder, name..)\n\n## Options\n\n```javascript\noptions = {\n  apiKey: YOUR_API_KEY,\n  deepSearch: true,\n  cors: false,\n  params: {},\n  focus: false\n}\n```\n\n| Name                 | Type    | Default                      | Description                                                            |\n|----------------------|---------|------------------------------|------------------------------------------------------------------------|\n| `apiKey`             | String  | null                         | Your Google PLACE Api key (REQUIRED)                                   |\n| `deepSearch`         | Boolean | false                        | Get more informations about selected place (geometry etc..)            |\n| `cors`               | Boolean | false                        | Set to true when project is running locally                            |\n| `params`             | Object  | {}                           | Google Autocomplete optional parameters                                |\n| `focus`              | Boolean | false                        | Focus input                                                            |\n| `debounceTime`       | Number  | 400                          | Time in ms before trigger a new Google api call                        |\n\nParams object is useful to refine predictions, for example if you want to get first predictions near to a location within a radius distance in a certain language you can set params like this :\n\n```javascript\nparams = {\n  location: `${lat},${lng}`,\n  radius: 1000,\n  language: 'fr'\n}\n```\nSee [Optional parameters](https://developers.google.com/places/web-service/autocomplete) section for more informations\n\n## Events\n\n@select event is triggered when a prediction is selected. It send an object with datas about the location\n\n## Template and slot-scope\n\nIn order to be more flexbile, you are able to make your own results template with `slot-scope`.\n\n```javascript\nprops = {\n  inputAttrs: Object,\n  inputEvents: Object,\n  query: String,\n  results: Array,\n  loading: Boolean,\n  selectPrediction: Function,\n  hasResults: Boolean\n}\n```\n\n## Pre-configured Components\n\n\n### Bulma dropdown markup.\n\n\u003cimg src=\"./img/example-bulma-dropdown.gif\" alt=\"Custom Google Autcomplete Example with Bulma Dropdown\"\u003e\n\n```vue\n\u003ctemplate\u003e\n  \u003cbulma-dropdown(:options=\"options\" @select=\"selected = $event\") placeholder=\"Search\"/\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { BulmaDropdown } from 'vue-custom-google-autocomplete'\n\nexport default {\n  components: {\n    BulmaDropdown\n  },\n  data() {\n    return {\n      selected: null,\n      options: {\n        apiKey: process.env.VUE_APP_PLACE_API_KEY,\n        deepSearch: true,\n        cors: true,\n        focus: false,\n        params: {\n          location: '43.3,5.4',\n          radius: 1000,\n          language: 'fr'\n        }\n      }\n    }\n  }\n}\n\u003c/script\u003e\n```\n\nTo customize loading text and no results text, two slots are availables : `loading` and `empty`.\nInput is binded with `$attrs`\n\n\n### Bootstrap dropdown.\n\n\u003cimg src=\"./img/example-bootstrap.png\" alt=\"Custom Google Autcomplete Example with Bootstrap Dropdown\"\u003e\n\n```vue\n\u003ctemplate\u003e\n  \u003cbootstrap-dropdown(:options=\"options\" @select=\"selected = $event\") name=\"input-name\"/\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { BootstrapDropdown } from 'vue-custom-google-autocomplete'\nexport default {\n  components: {\n    BootstrapDropdown\n  },\n  data() {\n    return {\n      selected: null,\n      options: any = {\n        apiKey: process.env.VUE_APP_PLACE_API_KEY,\n        deepSearch: true,\n        cors: true,\n        focus: false,\n        params: {\n          location: '45.52345,-122.67621',\n          radius: 1000,\n          language: 'en'\n        }\n      }\n    }\n  }\n}\n\u003c/script\u003e\n```\n\nTo customize loading text and no results text, two slots are availables : `loading` and `empty`.\nInput is binded with `$attrs`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamienroche%2Fvue-custom-google-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdamienroche%2Fvue-custom-google-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamienroche%2Fvue-custom-google-autocomplete/lists"}