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"