Vue Configurations
Configuration Options
When the Autoaddress Vue Component is initialised, you must pass in your license key. This is the only mandatory setting to pass into the control, for the rest of settings have default values set.
Basic Initialisation
<Autoaddress licencekey = "your_key" vanityMode = {true} addressProfile = "Demo5LineV2" />
Binding Variables and States
You can bind variables and states to the settings so that they can respond to changes from your website.
<Autoaddress licencekey = "your_key" :vanityMode = "your_v-model_vanityModeOption" :country = "your_v-model_countryOption" :addressProfile: = "your_v-model_vanityModeOption" />
General Properties
Option | Description | Type | Default |
---|---|---|---|
licencekey* | Unique Key Per Customer | string | None |
language | Language for the component. Allowed values are "en" for English and "ga" for Irish. |
string | "en" |
country | Change the country search for the component. Allowed values are "ie" for Ireland, "ni" for Northern Ireland and "gb" for Great Britain. |
string | "ie" |
autocomplete | Toggle for enabling AutoComplete feature on the component | boolean | true |
autocompleteMinChars | Number of characters that are typed before AutoComplete feature starts. | int | 3 |
optionsLimit | An upper limit on the number of options that may be returned. The default value is -1. Having the limit set to -1 allows for intelligent grouping when many address options are returned. | int | None |
geographicAddress | Turns on or off Geographic Address in results. | boolean | false |
vanityMode | Turns on or off Vanity mode, which displays non-Postal compliant user preferred addresses as part of the response data (See Find Address API for more details). | boolean | false |
addressElements | Turns on or off address elements (See Find Address API for more details). | boolean | false |
addressProfile | Name of address profile that determines how addresses are returned (See Find Address API for more details). | string | None |
width | Width of the Autoaddress component. By default this is set to "Auto" which means it will fit in whichever container it is placed in automatically and set it`s width to 100% of that container. If you wish to change the width of the component, simply add the width in px. I.e "200" or "300" | string | "Auto" |
displayBusinessListings | Turn on or off the Business Listings tab for responses which return mixed residential and commercial results. When turned off only residential options will be returned. | boolean | "true" |
defaultSearch | Turn on or off the default search behavior. | boolean | "false" |
* Required Field
Message Properties
Below you will see how you can also configure all the messages displayed as part of the Autoaddress Vue Component. The following code snippet for example changes to text on the search button.
<Autoaddress licencekey = "your_key" vanityMode = {true} addressProfile = "Demo5LineV2" searchButtonLabel = "Search Button" />
Option | Description | Type | Default |
---|---|---|---|
placeHolderLabel | Hint to describe to expected input into the search field. Displayed before user starts typing. | string | "Enter Full Address or Postcode" |
searchButtonLabel | Value of the text on Search Button. | string | "Search" |
optionsFoundLabel | Text displayed to indicate to select one of the options returned. Only displayed when options are available. | string | "Please select an option below" |
incompleteAddressLabel | Info message displayed when the search result was an Incomplete Address. | string | "Too little information, please enter more details." |
partialAddressLabel | Info message displayed when the search result was an Partially Matched Address. | string | "Couldn't find [unmatched] try again or enter address manually below." |
nuaAddressFoundLabel | Info message displayed when the search result was an Non Unique Address (NUA). Other addresses share this address and require the user to add an Eircode to make the address unique. | string | "We’ve found the address, please add your Postcode in the text box below if you know it" |
noResultFoundLabel | Info Message displayed when no result could be found for the search. | string | "No search results have been found." |
addressFoundLabel | Success message when a full address or Eircode has been found. | string | "Postcode Found, address populated below" |
inputRequiredLabel | Info message displayed when no input has been entered by the user. | string | "Enter a full address or Postcode to begin your search." |
errorMessageLabel | Info message displayed when an Error has occurred. | string | "Sorry, an unexpected error has occurred." |
addressTabLabel | Tab Label | string | "Address" |
businessTabLabel | Tab Label | string | "Business" |