Use Vue.js on AIO Landings

This guide will help you understand how to use Vue.js on your AIO landings to enhance their functionality and user experience.
Do not worry if you are not familiar with coding; This guide is as straightforward as possible, and will help you to easily implement your desired features.

What is Vue.js?

Vue.js is a popular JavaScript framework that allows you to create dynamic and interactive web interfaces. It helps you build responsive user interfaces by binding data to HTML elements in a simple way.

Why Use Vue.js on Your Landings?

By integrating Vue.js into your Landing pages, you can:

Display dynamic content based on user data or interactions.
Simplify conditional rendering (showing or hiding elements).
Easily loop through data to display lists or repeated elements.

How to Add Vue.js to Your Landing Page

To start using Vue.js, you need to declare it in the element where you want it to work. Just add id="vue" to that element.

Examples:

<body id="vue">
    <!-- Your content here -->
</body>

<div id="vue">
    <!-- Your content here -->
</div>

Working with AIO Placeholders

You can access all the AIO placeholders with Vue.js. Here is how:

Original AIO Placeholder:
```
{{aio.visit.country_code}}
```
Placeholder with Vue.js:
```
{{vue.aio.visit.country_code}}
```

Example:

<body id="vue">
    <div>
	    My country code is {{vue.aio.visit.country_code}}
	    My country code is {{aio.visit.country_code}}
		</div>
</body>

How to Use Common Vue.js Directives

These are some of the most common and simple Vue.js directives that can enhance your landings:

v-if: Conditionally render an element.
v-else: Specify an alternative if the v-if condition is false.
v-else-if: Chain multiple conditional blocks.
@click: Attach a click event to an element.

Examples:

// A simple use case of v-if, v-else-if, v-else

// If country code of visit is RU, then show "You are Russian!"
// Else if country code of visit is DE, then show "You are German!"
// Else if country code of visit is not RU, show "You are not from Russia or Germany!"
<body id="vue">
    <div v-if="vue.aio.visit.country_code === 'RU'">
	    You are Russian!
		</div>
		 <div v-else-if="vue.aio.visit.country_code === 'DE'">
	    You are German!
		</div>
		 <div v-else>
	    You are not from Russia or Germany!
		</div>
</body>

// A simple use case of @click

// When visit with country code which is not DE or RU lands on page ->
// -> message "You are not from Russia or Germany!" will be shown
// When element with that message is clicked -> country code will change to DE
// Therefore the condition `v-else-if="vue.aio.visit.country_code === 'DE'` ->
// -> will now become true, and message "You are German!" will be shown instead
<body id="vue">
    <div v-if="vue.aio.visit.country_code === 'RU'">
	    You are Russian!
		</div>
		 <div v-else-if="vue.aio.visit.country_code === 'DE'">
	    You are German!
		</div>
		 <div v-else @click="vue.aio.visit.country_code = 'DE'">
	    You are not from Russia or Germany!
		</div>
</body>

How to Use Advanced Vue.js Directives

Please note that the following list of directives is not complete. For the complete functionality refer to the official Vue.js documentation. In this section, we will focus only on the v-for directive and advanced use cases of the previously discussed directives:

v-for: Loop through data to render a list.
v-if with declared object array.
v-if with multiple conditions.

Other Directives and functionality can be found in the official Vue documentation here:
https://vuejs.org/guide/introduction.html

Please note that the examples below are presented out of context. You will need to declare the actual objects to use with these directives. Instructions on how to do this will be provided in the next paragraph.

Example v-for:

// Access the comments array and display each item from it
<body id="vue">
    <div v-for="item in vue.comments">
	    {{item}}
		</div>
</body>

Example v-if with object:

// Access the translation array and display the value from it, if such a value exists
<body id="vue">
    <div v-if="vue.translation.[vue.aio.visit.country_code].HEADER">
	    {{vue.translation[vue.aio.visit.country_code].HEADER}}
		</div>
</body>

Example v-if with multiple conditions:

// Display the value if multiple conditions are true
// In this example: If country_code=RU AND visit field Creative has a value of 'image'
<body id="vue">
    <div v-if="vue.aio.visit.country_code === 'RU' && vue.aio.visit.fields.creative === 'image'">
	    {{vue.aio.visit.country_code}}
		</div>
</body>

Declaring Objects for Use in Vue.js

You can declare data objects using our AIO SDK via aioBus. This allows you to define data that Vue.js can use to render content dynamically.

In the previous example, we demonstrated its usage in v-for and v-if. Now, let us see how the actual array of values for that cycle was defined via aioBus.

Example v-for:

Declaring a simple array and showing values from it:

// Simple usage of v-for

// We have declared an array of some values via aioBus
// Now we can access these values and show them dynamically using v-for
// This cycle will render all the values from an array called comments on the lander
<body id="vue">
    <div v-for="item in vue.comments">
	    {{item}}
		</div>
</body>

// Simple declare of an array of strings
<script>
    window.aioBus.push({
        type: "vue-data-object",
        data: {
            comments: ['Some comment 1', 'Some comment 2', 'Some comment 3']
        }
    });
</script>

Example v-if:

Declaring translations for different languages:

// Advanced usage of v-if
// Check the example below for a breakdown explanation of the code

// If such country code of the visit exists in translation object ->
-> then show value of HEADER of that object
// i.e if country code is RU -> show "РУССКИЙ ЗАГОЛОВОК"
<body id="vue">
    <div v-if="vue.translation?.[vue.aio.visit.country_code]?.HEADER">
	    {{vue.translation[vue.aio.visit.country_code].HEADER}}
		</div>
</body>

// Advanced declare of nested objects with key:value pairs ->
-> {object1:{object2 key:"", object2 value:""}}
<script>
    window.aioBus.push({
        type: "vue-data-object",
        data: {
            translation: {
                "RU": {
                    HEADER: 'РУССКИЙ ЗАГОЛОВОК'
                },
                "DE": {
                    HEADER: 'GERMAN HEADER'
                }
            }
        }
    });
</script>

Breaking down in detail what happens in this part of the code:

<div v-if="vue.translation?.[vue.aio.visit.country_code]?.HEADER"> {{vue.translation[vue.aio.visit.country_code].HEADER}} </div>

There’s a chain of events happening here:
1. In v-if we check if the vue.translation object exists, and access it if it does.
2. Then we check if the vue.translation.key (the key here is our RU and DE values) object inside of vue.translation exists and if it has the same values as the country code of the visit here vue.translation?.[vue.aio.visit.country_code].
3. Then if such a value exists (the country code of the visit is RU, and we have a RU object in the translation object), we access the HEADER value and display it in
{{vue.translation.[vue.aio.visit.country_code].HEADER}}.

So, in the end: if the country code of the visit is RU→ display “РУССКИЙ ЗАГОЛОВОК”.

Errors may arise when using advanced methods of interacting with Vue.js. We will cover how to resolve them in the next paragraph.
To prevent these errors, we use ? in our v-if directive, which checks if the value exists. If it does not, the check stops there without breaking the code.

Debugging Possible Errors with Objects

In some cases, especially if you have little coding experience, you may encounter unexpected errors. The most common error is trying to access an undefined object. Here is how you can catch and resolve this issue.

Example:

We have declared an object with translations and are attempting to access it using v-if :

<body id="vue">
    <div v-if="vue.translation.[vue.aio.visit.country_code].HEADER">
	    {{vue.translation[vue.aio.visit.country_code].HEADER}}
		</div>
</body>

<script>
    window.aioBus.push({
        type: "vue-data-object",
        data: {
            translation: {
                "RU": {
                    HEADER: 'РУССКИЙ ЗАГОЛОВОК'
                },
                "DE": {
                    HEADER: 'GERMAN HEADER'
                }
            }
        }
    });
</script>

Using this example code, we will break the Landing page if we try to access it with any country code other than RU or DE, which we defined in vue.translation, due to the way nested objects are accessed.

For example, if we try to open a landing page with the NL country code, the following will happen:

The code will check if vue.translation exists → Success!
Then the code will check if vue.translation.NL exists → Error!

This error, if not handled, will break the whole code block.

To prevent this, we use the? expression or the && expression. They essentially perform the same function: they safely check the next value, and if it does not exist, they prevent the execution of the code block.

An example of using ?:

<body id="vue">
    <div v-if="vue.translation?.[vue.aio.visit.country_code]?.HEADER">
	    {{vue.translation[vue.aio.visit.country_code].HEADER}}
		</div>
</body>

An example of using &&:

<body id="vue">
    <div v-if="vue.translation && vue.translation[vue.aio.visit.country_code] && vue.translation[vue.aio.visit.country_code].HEADER">
	    {{vue.translation[vue.aio.visit.country_code].HEADER}}
		</div>
</body>