Setting up Autoaddress for your Vue project

Autoaddress can be implemented in your Vue project by using our Autoaddress Vue component. Starting with the basic requirements, you can follow the step-by-step instructions below.


Requirements

  • Node.js with Node Package Manager (npm).re
  • Autoaddress Licence Key - for a free key contact us.


Step 1 : Installing the package

The package can be installed by using the following command in the project root folder using a terminal or command-line interface.

    $ npm install "@autoaddress.ie/autoaddress-vue"

Step 2 : Importing the Autoaddress component

In your ​Vue project, you can import the Autoaddress component using the code below.
N​ote :- Dont forget to include Autoaddress as a component.

  <script>
     import
Autoaddress from '@autoaddress.ie/autoaddress-vue/src/Autoaddress’;
 </script>


Step 3 : Instantiating the component

After importing the component you can instantiate it by using the code below in the "return" part of your function.

  <template>
     < div id="{app_id_name}">
         <
Autoaddress
            licencekey "your_key"
            vanityMode {true}
            addressProfile "Demo5LineV2"
            country "ie"
            language "en"
         />
    </div>
 </template>

Step 4 : 

Ensure Vanity Mode is set to ‘true’ to ensure that your search returns and can display the preferred address (the most commonly used version of that address).  

The Autoaddress component is now and up and running on your page, you can now change the configuration, add extra logic in the callback events or change the ​styling to suit your needs !

Step 5 : 

Supply your address profile. The address profile will define how your address is presented based on your profile's rules.

​Below are examples of the same address using different Address Profiles.

ap1v2
AutoaddressProfileV2
ap3v2

Demo5LineV1

Demo5LineV2

Demo5LineV3


You are ready !

The Autoaddress Component is now ready for searching on your webpage

 

Now its time to :

  • See how you can Configure the component.
  • Set up custom Events for your needs.
  • Change the Styling for the ​component.