Vue Component

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

---

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.

<code>    $ 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.
Note :- 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}"><br>         <Autoaddress<br>            licencekey = "your_key"<br>            vanityMode = {true}<br>            addressProfile = "Demo5LineV2"<br>            country = "ie"<br>            language = "en"<br>         /><br>    </div><br> </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.