Appearance

Address Select ​

Allows the user to select an address from a list of addresses returned by the Google Places API.

Documentation notes ​

Given that the AddressSelect component reaches out to Google's API, you need to provide a valid API key to see examples:

Configuration ​

The AddressSelect component accepts a Google Maps API key in two ways:

Global Options ​

While installing the Stash plugin in your app, you can configure a default google maps api key via the global options:

ts
// src/main.ts
import { createApp } from 'vue';
import stash from '@leaflink/stash';

const app = createApp(App);
app.use(stash, { googleMapsApiKey: '<GOOGLE_MAPS_KEY>' });

Component Props ​

If you want to provide api key per component instances, you can do it so via the apiKey property:

template
<AddressSelect api-key="<GOOGLE_MAPS_KEY>"></AddressSelect>

INFO

Component props takes precedence over global options

Basic usage ​

The AddressSelect component accepts an Address object as a v-model value.

json
{}
vue
<script setup>
  const address = reactive({
    street_address: undefined,
    extended_address: undefined,
    city: undefined,
    state: undefined,
    postal_code: undefined,
    country: undefined,
    place_id: undefined,
  });
</script>

<template>
  <AddressSelect v-model="address" />
</template>

If values are already populated, the AddressSelect component will pre-select it.

vue
<script setup>
  const address = reactive({
    street_address: '123 Main St',
    extended_address: 'Suite 100',
    city: 'Toronto',
    state: 'ON',
    postal_code: '12312',
    country: 'CA',
    place_id: undefined,
  });
</script>

<template>
  <AddressSelect v-model="address" />
</template>

Debouncing ​

By default, the AddressSelect component will debounce the API calls to Google's API by 1000 milliseconds. You can configure a specific debounce delay via the debounceTime property:

template
<AddressSelect :debounce-time="5000" />

TIP

It is important to always set a debounce time given that requests to Google Maps API are paid

Select Properties ​

Since the AddressSelect component is a wrapper around the Select component, you can pass any of the select properties properties to it:

Placeholder ​

template
<AddressSelect placeholder="A custom placeholder" />

Label ​

template
<AddressSelect label="custom label" />

Hint ​

Using a prop:

template
<AddressSelect hint-text="hint text" />

Using a slot:

template
<AddressSelect>
  <template #hint>hint text</template>
</AddressSelect>

Error ​

template
<AddressSelect error-text="error text" />

Disabled ​

template
<AddressSelect disabled />

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.