{"_id":"vue-google-maps-address-autocomplete","_rev":"27-dfc23a034d720ff0739395969c6ce886","name":"vue-google-maps-address-autocomplete","dist-tags":{"latest":"1.0.16"},"versions":{"1.0.13":{"name":"vue-google-maps-address-autocomplete","version":"1.0.13","description":"Google Maps Address Autocomplete suggests street addresses to users as they type an address into a form. This component aims at integrating this logic seamlessly into your Vue.js project.","main":"dist/vue-google-maps-address-autocomplete.cjs.js","module":"dist/vue-google-maps-address-autocomplete.esm.js","browser":"dist/vue-google-maps-address-autocomplete.umd.js","unpkg":"dist/vue-google-maps-address-autocomplete.min.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rollup -c","dev":"rollup -c -w"},"keywords":["GoogleMaps","Address","autocomplete","vue"],"author":{"name":"Thomas Sohet"},"license":"ISC","repository":{"type":"git","url":"git+https://github.com/Sohett/vue-googlemaps-address-autocomplete.git"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"devDependencies":{"@rollup/plugin-node-resolve":"^13.0.4","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"vue":"^2.6.14"},"dependencies":{"@rollup/plugin-commonjs":"^20.0.0","@vue/compiler-sfc":"^3.1.5","rollup":"^2.56.0","rollup-plugin-vue":"^6.0.0"},"gitHead":"fc1aba8cb4eaaf2117d37ba6d4eb55e174b1b00a","bugs":{"url":"https://github.com/Sohett/vue-googlemaps-address-autocomplete/issues"},"homepage":"https://github.com/Sohett/vue-googlemaps-address-autocomplete#readme","_id":"vue-google-maps-address-autocomplete@1.0.13","_nodeVersion":"15.0.1","_npmVersion":"7.8.0","dist":{"integrity":"sha512-+jgge5/tFNPw/O6JLWgHezwAY+P11frU7Ylgw6fbp1EI/TFFWSsu8PAdPGey4560hWaXiNCaG5+LvGiLo1mNOQ==","shasum":"f2cd364ccb761b4afd3befcdc064fa2d33281dde","tarball":"https://registry.npmjs.org/vue-google-maps-address-autocomplete/-/vue-google-maps-address-autocomplete-1.0.13.tgz","fileCount":10,"unpackedSize":41905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEO6bCRA9TVsSAnZWagAAAdEP/RWev2EMAsCqTw6ZmBRP\nlAytn8nKhAWpTgMOKnWq+MGX06CmDkgqY3uff+fvT25q7aw3HoZUG47SiVt5\nUyw3on3FLhG2J6o/qu1gkDT2vRgUWOawhqdGrm15rRDsMsLXKBBVLx3MeUsp\nP7w9h+WEirndkG2/H93mSEWMYt3vhhc1IOs/lPBVteOgg+lyBNgVJMr0Vm6B\nBtXATm8Vt2RMkYy6UdYs1W7KQZzSAKisSlILCQJdZ3cOFYIVrMBIhwWXhhE2\nV+NSoWNAx5/ZvqsxMzjYsqQMb6fSVSriy3dtHpUxnkspPmP8yuRi0CLSPQg2\nX+gg8u1VCUTpnkDsK+3nZ72To3MeCzidob/hDGDM/6WLkIOrrUg5kTqqNpCQ\n9p7QGdYQMUXJx0IIcvzGBsUrUHwkb4Q2huNBVfiZTDXIIAd7olHhU0BetYxF\n5+/54zI1IvlQpiMS4nVwmdQfw37bSP0CtAlqMYnkKl+3X1BDjp0Ckcjmfq6y\nUd1YTtgjvqLZC1SLWj8MFV20MjxqeCtKUo92HFR0a2Iri7LWenpHKU6ZwBuG\njQEms8hGlthEG6sFrad5Q1bH8uXAwqy1FHiRcZWGr7QdsEBl4Za4dOdwoe5v\nIFzvjLJalivc+itDJuSpeRCA3TBOBrDs/M8mzMo/viZt+GER4Ubj+Yx+VSKO\nvo2S\r\n=Pz0V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC3mt4mzD08s04TJYdF+Wv+m67fuNMFU6E5pIhqMhMBKAiEAopklgr0fgh0S59ZD3ketfV/oY60j7JRYqVjCworWXuI="}]},"_npmUser":{"name":"sohett","email":"temporary.sohet@gmail.com"},"directories":{},"maintainers":[{"name":"sohett","email":"temporary.sohet@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-google-maps-address-autocomplete_1.0.13_1628499611157_0.9011961818626646"},"_hasShrinkwrap":false},"1.0.14":{"name":"vue-google-maps-address-autocomplete","version":"1.0.14","description":"Google Maps Address Autocomplete suggests street addresses to users as they type an address into a form. This component aims at integrating this logic seamlessly into your Vue.js project.","main":"dist/vue-google-maps-address-autocomplete.cjs.js","module":"dist/vue-google-maps-address-autocomplete.esm.js","browser":"dist/vue-google-maps-address-autocomplete.umd.js","unpkg":"dist/vue-google-maps-address-autocomplete.min.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rollup -c","dev":"rollup -c -w"},"keywords":["GoogleMaps","Address","autocomplete","vue"],"author":{"name":"Thomas Sohet"},"license":"ISC","repository":{"type":"git","url":"git+https://github.com/Sohett/vue-googlemaps-address-autocomplete.git"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"devDependencies":{"@rollup/plugin-commonjs":"^20.0.0","@rollup/plugin-node-resolve":"^13.0.4","@vue/compiler-sfc":"^3.1.5","rollup":"^2.56.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-vue":"^6.0.0"},"peerDependencies":{"vue":"^2.6.14"},"gitHead":"f1314fbc871c7dc36b1a55b5b8554b83623f2e8b","bugs":{"url":"https://github.com/Sohett/vue-googlemaps-address-autocomplete/issues"},"homepage":"https://github.com/Sohett/vue-googlemaps-address-autocomplete#readme","_id":"vue-google-maps-address-autocomplete@1.0.14","_nodeVersion":"15.0.1","_npmVersion":"7.8.0","dist":{"integrity":"sha512-y+eLeXdQdAee47u4ZAxRxWBOi9JB2gbB8GGBdwrjiLimnOFnGu/QYlW3LoF35ZnJA8gDI+KGKLVBXV/gD1lNcw==","shasum":"1c51da30e6ea42d4a24fa97b83b9f4d4dbf0cbe5","tarball":"https://registry.npmjs.org/vue-google-maps-address-autocomplete/-/vue-google-maps-address-autocomplete-1.0.14.tgz","fileCount":10,"unpackedSize":41881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhETpZCRA9TVsSAnZWagAAWwMQAKUaJgyC/a6VkchLtkGc\n6uqiW7mYJYeMW+GK7WQMjoKz3EDSHNc/79CUpNWpu5MspygGfgdcaZW58Rvd\n9bg5fU4T+ZVf0HYUQZaqNSbDE5PZNr3LdFfHXlOKGGM7dWp12loFaTRyiWpe\nuBtzT6ZeYX1qyYy/Hw5UmtjcP3P2u5MZS1L3YZNb2qKwPVJA6vRdgBDy0eAM\n1c40yvfWarDga/YeUvRxw6AsS2ym9D/5UIL6KhxPBW4yQ5UwnioJtPNVZGmH\nspL0rnO1+sH4C33HWWCa67BplvqkETfpDkqUKqSZOpElWap/t3kimByAHo46\nHTzpdufGs/fX9QB6WmT0YnVrR+nFOKgASen3DaL9WOxeBpZ3tq1vqzIb5I6N\nv+y2K+QrDtvpnJnBt9i1otKUDAbm200w0ea96nT5NuI94IA2pg46U7dV3Q0Y\nPJDgWEk+jim/jmYARGd3XLUcF9o+PgOhwNowmgJwJleHTo/etmq819JPGP8g\nmx7QPRaMNfbm69AHjUGZLXBPZuLPm0gFC8GVBuf25wN0kkJHVzSs62FtSI2G\nsHCjt9ry01KfvAHWGEHbfhH3Q34pxas1cmWrnliMsEl28+htbkJa8pUUBP5+\nfHPAERtbbJv2JQmU4ezvr2wP34sgvqgeQKLgwbnAT7d/gU1jUZL93s1wkHHn\nw4Qk\r\n=zKu5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsN1y44vaMdNT1lJcLoQM8jicNKFkXOE1L27Mo9bzx4wIgSm4ygzTeP1yH986nuSlWWix8wXyg+oX8GkoYgj9pcqU="}]},"_npmUser":{"name":"sohett","email":"temporary.sohet@gmail.com"},"directories":{},"maintainers":[{"name":"sohett","email":"temporary.sohet@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-google-maps-address-autocomplete_1.0.14_1628519001750_0.837427750076992"},"_hasShrinkwrap":false},"1.0.15":{"name":"vue-google-maps-address-autocomplete","version":"1.0.15","description":"Google Maps Address Autocomplete suggests street addresses to users as they type an address into a form. This component aims at integrating this logic seamlessly into your Vue.js project.","main":"dist/vue-google-maps-address-autocomplete.cjs.js","module":"dist/vue-google-maps-address-autocomplete.esm.js","browser":"dist/vue-google-maps-address-autocomplete.umd.js","unpkg":"dist/vue-google-maps-address-autocomplete.min.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rollup -c","dev":"rollup -c -w"},"keywords":["GoogleMaps","Address","autocomplete","vue"],"author":{"name":"Thomas Sohet"},"license":"ISC","repository":{"type":"git","url":"git+https://github.com/Sohett/vue-googlemaps-address-autocomplete.git"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"devDependencies":{"@rollup/plugin-commonjs":"^20.0.0","@rollup/plugin-node-resolve":"^13.0.4","@vue/compiler-sfc":"^3.1.5","rollup":"^2.56.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-vue":"^6.0.0"},"peerDependencies":{"vue":"^2.6.14"},"gitHead":"6bb93629d24183509beedbe02d687370f35a800b","bugs":{"url":"https://github.com/Sohett/vue-googlemaps-address-autocomplete/issues"},"homepage":"https://github.com/Sohett/vue-googlemaps-address-autocomplete#readme","_id":"vue-google-maps-address-autocomplete@1.0.15","_nodeVersion":"15.0.1","_npmVersion":"7.8.0","dist":{"integrity":"sha512-T9IYvoOlB5W+aeao39kFvYnw55juoSlU4OYqzWdqpUbo6USKiD8Hchn7rINVPQaxOrMqtBG+7txwD/6FmE8Z8g==","shasum":"9478f4a73d3121ada31b8d9112c2d26abb63d1cc","tarball":"https://registry.npmjs.org/vue-google-maps-address-autocomplete/-/vue-google-maps-address-autocomplete-1.0.15.tgz","fileCount":10,"unpackedSize":42151,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICB4+yhopPA2g0sPUiMVfr3QNhKeXAdN5ekfS+tQaKvRAiAzaPFHTDmBhW0l4RSO0Q82Rm4vvxoffl/C66yBPoB1Nw=="}]},"_npmUser":{"name":"sohett","email":"temporary.sohet@gmail.com"},"directories":{},"maintainers":[{"name":"sohett","email":"temporary.sohet@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-google-maps-address-autocomplete_1.0.15_1633339112614_0.609875360959681"},"_hasShrinkwrap":false},"1.0.16":{"name":"vue-google-maps-address-autocomplete","version":"1.0.16","description":"Google Maps Address Autocomplete suggests street addresses to users as they type an address into a form. This component aims at integrating this logic seamlessly into your Vue.js project.","main":"dist/vue-google-maps-address-autocomplete.cjs.js","module":"dist/vue-google-maps-address-autocomplete.esm.js","browser":"dist/vue-google-maps-address-autocomplete.umd.js","unpkg":"dist/vue-google-maps-address-autocomplete.min.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rollup -c","dev":"rollup -c -w"},"keywords":["GoogleMaps","Address","autocomplete","vue"],"author":{"name":"Thomas Sohet"},"license":"ISC","repository":{"type":"git","url":"git+https://github.com/Sohett/vue-googlemaps-address-autocomplete.git"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"devDependencies":{"@rollup/plugin-commonjs":"^20.0.0","@rollup/plugin-node-resolve":"^13.0.4","@vue/compiler-sfc":"^3.1.5","rollup":"^2.56.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-vue":"^6.0.0"},"peerDependencies":{"vue":"^2.6.14"},"gitHead":"3d774bfce35123119f2d2047047a0a301a7cc5fc","bugs":{"url":"https://github.com/Sohett/vue-googlemaps-address-autocomplete/issues"},"homepage":"https://github.com/Sohett/vue-googlemaps-address-autocomplete#readme","_id":"vue-google-maps-address-autocomplete@1.0.16","_nodeVersion":"13.7.0","_npmVersion":"7.11.2","dist":{"integrity":"sha512-jmmrRI0vLvWln8pEO0KxgFBvi2BWkvpqql68UYcPnVdw3sQWx0JubnrMwonZWSDXg1W8EXbzaNoicZx6JiHYtw==","shasum":"f03e6ce18cc91fc7f6880de190b7a061dcc562d6","tarball":"https://registry.npmjs.org/vue-google-maps-address-autocomplete/-/vue-google-maps-address-autocomplete-1.0.16.tgz","fileCount":10,"unpackedSize":42480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3ARxCRA9TVsSAnZWagAALTMP/Rd2kU1Snjpuetnp+lez\nFRPFM/66jflRg7KSrNEnoP+bixYWf/gglBFCbZZqotWo3DWhre1uEBrcgUeT\n9vg9kgm/YdBcjeQiEvoJx+uXElfS6EBZq3eTx3THUX2wkifZssePf8h8+ZDu\nm2IJJ+CPNrTc2nwgHNno0wP3qUVkCF2gnDL3FuM1GS2tY+Af40ivjNfmoN2T\nlpu+26ccamqScBjUg2HLtGixPEKRfj8qQXnfpBEb6ajxQ7At0iWKiJGhwmGf\nsVHQFE1u+89DoIswZk02OxN3cDsL7DOYwj9d+2StZ+TRp+0P9Omj0e4ae1cb\nqDznWp87EvGtItW36PMV4dkX0JLTb6OqfgyniAwvaLGkCZYNS4wvfrfDYVmJ\nesxOStB/Pg3PrLSxRcyL0CtJfFK/4FkLXNAmr3GN7pVMf8EdR/SfyucamhdG\n7v9p4yCC+sX6gNi5HPqwvt2L8OUnbhI1Gjv5QsVal0Dindn796/IAqx3HQdk\njh/JgN//gJNVLQeMm5Q4nRG8Bbo6jj0s8n+8Wc2dT+cq5nr0mer1VLmDJBkU\nY4TJVq1+F/DnL6n51/9RWdlBoYrtFBj68zR44pKJTKdPOvKTGaxljhfdNC2c\nTtyvxLngYIQKqBoCop0gtVvSJO2KD+8bBVJ9K+bI2qLdkzaaxFkoCw5UZxpc\nEP/K\r\n=IHJ1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDon2dnunkHf5DN3/Q7hblrC3qn+os37jmB4yZkcy2B8gIgSocSOYw1J+w6CqorWj61PdDyXuj6GEigp2vruV5VKrA="}]},"_npmUser":{"name":"sohett","email":"temporary.sohet@gmail.com"},"directories":{},"maintainers":[{"name":"sohett","email":"temporary.sohet@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-google-maps-address-autocomplete_1.0.16_1636379903685_0.6360904621539363"},"_hasShrinkwrap":false}},"time":{"created":"2021-08-05T12:54:13.891Z","1.0.2":"2021-08-05T12:54:14.000Z","modified":"2022-05-23T15:19:06.765Z","1.0.3":"2021-08-05T12:56:50.029Z","1.0.4":"2021-08-05T13:00:30.184Z","1.0.5":"2021-08-05T13:48:17.613Z","1.0.6":"2021-08-05T14:01:26.346Z","1.0.7":"2021-08-05T14:03:37.931Z","1.0.8":"2021-08-06T09:18:05.370Z","1.0.9":"2021-08-06T10:20:08.937Z","1.0.10":"2021-08-06T10:22:13.494Z","1.0.11":"2021-08-06T10:27:19.084Z","1.0.12":"2021-08-06T10:45:18.615Z","1.0.13":"2021-08-09T09:00:11.293Z","1.0.14":"2021-08-09T14:23:21.906Z","1.0.15":"2021-10-04T09:18:32.739Z","1.0.16":"2021-11-08T13:58:23.840Z"},"maintainers":[{"name":"sohett","email":"temporary.sohet@gmail.com"}],"description":"Google Maps Address Autocomplete suggests street addresses to users as they type an address into a form. This component aims at integrating this logic seamlessly into your Vue.js project.","homepage":"https://github.com/Sohett/vue-googlemaps-address-autocomplete#readme","keywords":["GoogleMaps","Address","autocomplete","vue"],"repository":{"type":"git","url":"git+https://github.com/Sohett/vue-googlemaps-address-autocomplete.git"},"author":{"name":"Thomas Sohet"},"bugs":{"url":"https://github.com/Sohett/vue-googlemaps-address-autocomplete/issues"},"license":"ISC","readme":"# Googlemaps address autocomplete (Vue.js)\n\n### Description:\nVue.js package that helps you to seamlessly integrate the \"auto suggest\" and \"autocomplete\" feature of Google Maps' API.\\\nGoogle API has developped a nice auto-suggests feature that will help users as they type an address into a form. This component is build on top of that Google feature and will thus:\n- auto-suggest the available address from Google Maps\n- prepopulate the address fields as the user select an address in the list\n\n![Demo](./assets/google-maps-address-autocomplete-demo.gif)\n\n___\n\n### Usage\n#### 1. Register on Google console\n[Google Maps Platform](https://developers.google.com/maps/documentation/javascript/places-autocomplete) to get an API key from Google.\n\n#### 2. npm install this package\nhttps://www.npmjs.com/package/vue-google-maps-address-autocomplete\n\n```bash\nnpm i vue-google-maps-address-autocomplete\n```\nOR\n```bash\nyarn add vue-google-maps-address-autocomplete\n```\n#### 3. Define your `$googleApiKey` ! Required !\n\n```js\n// Vue 2\nVue.prototype.$googleMapsApiKey = 'yourApiKey';\n\n// Vue 3\nVue.config.globalProperties.$googleMapsApiKey = 'yourApiKey';\n```\n\n#### 4. Register globally or locally this component.\n\n**Globally in main.js**\n```js\nimport AddressAutocomplete from 'vue-google-maps-address-autocomplete';\nVue.use(AddressAutocomplete);\n```\n\n**Locally in a component.vue**\n```js\nimport AddressAutocomplete from 'vue-google-maps-address-autocomplete';\nexport default {\n  ...,\n  components: { addressAutocomplete },\n  ...\n};\n```\n\n#### 5. Component interface:\nThe feature is implemented through a wrapper component: `<address-autocomplete>slot</address-autocomplete>`.\\\nThe component will expose a `slot` giving you the possibility to structure and style your component anyway you want. This package **does not provide any design implementation** as this is purely a **renderless component** that will just provide some JS logic to implement the autosuggest & autocomplete functionalities.\n\n_Example of usage_\n```vue\n<template>\n  <address-autocomplete\n    v-slot=\"{ addressAutocompleteRef, loadGoogleMapsScript }\"\n    @update-address=\"populateAutocompletedAddress\"\n  >\n    // Here comes your code\n    <div>\n      <input\n        v-model=\"address.streetName\"\n        :ref=\"addressAutocompleteRef\"\n        @input.once=\"loadGoogleMapsScript\"\n      >\n      <input v-model=\"address.streetNumber\">\n      <input v-model=\"address.streetBox\">\n      <input v-model=\"address.zipCode\">\n      <input v-model=\"address.city\">\n    </div>\n  </address-autocomplete>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        address: { streetName, streetNumber, zipCode, city }\n      }\n    },\n    ...,\n    methods: {\n      populateAutocompletedAddress (autocompletedAddress) {\n        // Here you assign the autocompletedAddress to your address data.\n        this.address = { ...this.address, ...autocompletedAddress };\n      }\n    }\n  }\n</script>\n```\n---\n\n### Properties & Events:\n\n**1. Ref [REQUIRED]**\\\nIt exposes the `addressAutocompleteRef` attribute. This attribute is **required** on your \"auto suggest\" input with a `:ref` binding. This is the input where the client will start typing and the suggestions from GoogleMaps will show up.\n```html\n<input v-model=\"address.streetName\" :ref=\"addressAutocompleteRef\">\n```\n\n**2. Props**\\\nThis provides the option to restrict the suggestions to specific countries. Props must be passed as a two-character, ISO 3166-1 Alpha-2 compatible country code (i.e. \"br\", \"sg\", \"fr\") in an array.\n- props: `countryRestrictions`\n- Default is: [\"be\"]\n- Type: `Array`\n```html\n<address-autocomplete\n  v-slot=\"{ addressAutocompleteRef, loadGoogleMapsScript }\"\n  @update-ddress=\"populateAutocompletedAddress\"\n  :country-restrictions=\"['au', 'nz']\"\n>\n  <slot></slot>\n</address-autocomplete>\n```\n\n**3. Methods**\\\nExposes a `loadGoogleMapsScript` [REQUIRED] method to asynchronously load the GoogleMaps script . This way, you're in control of when the script is actually loaded (ie: when user touches the input or @mounted).\n```html\n<input v-model=\"address.streetName\" @input.once=\"loadGoogleMapsScript\">\n```\n\n**4. Hook**\\\nIt exposes the `@update-address` hook that is triggered when the user select an option in the available list, passing the `autocompletedAddress`. This will prepopulated the address fields:\n  - `streetName`\n  - `streetNumber`\n  - `zipCode`\n  - `city`\n\n```js\nmethods: {\n  populateAutocompletedAddress (autocompletedAddress) {\n    this.address = { ...this.address, ...autocompletedAddress };\n  }\n}\n```\n___\n\nUse with care and enjoy 😉\n","readmeFilename":"readme.md"}