Free Currency Converter API Integration with Vue JS

Currency conversion apps have become an essential part of the economical world today. CurrencyFreaks integrated with Vue.js provides smooth interfacing. CurrencyFreaks currency API is a well-known API for real-time currency data. Vue.js is an advanced JavaScript framework. It is simple to learn.

In this blog post, we will explain why creating a currency converter with Vue.js is the best decision. We will also show how to integrate CurrencyFreaks step by step. You will learn how to obtain and test your API key. Later, we will help you create the application from scratch. Let's get started!

Why Choose Vue JS to Create a Currency Conversion Application?

Here are some reasons to choose Vue.js:

• Vue.js is easy and friendly. Any developer, regardless of skill level, can use it without wasting time. It is even better because there is detailed documentation for each feature.

• Vue.js has a good reactivity system. This ensures that dynamic data, like currency rates, updates in real-time.

• Vue.js is lightweight. It performs well, even with multiple functions in the application.

• Vue.js uses a component-based approach. This allows for easy duplication and organization of code. It also makes code maintenance easier.

• APIs like CurrencyFreaks integrate smoothly with Vue.js. This makes data retrieval and updates more efficient.

What Are the Steps to Create a Currency Conversion App Using Vue JS and A Free Currency Converter API?

Let's explore the easiest steps to create a currency conversion app using the Vue JS.

Get the Free Currency Converter API Key

Go to the CurrencyFreaks website at https://currencyfreaks.com/ 

However, you must ensure that Vue JS is installed on your systems before getting the API key. 

Click on the Sign Up button given at the top right corner:

Next, you should fill out the form given below:

After filling out the form, You should click on the Sign Up button.

Next, you should navigate to the Sign-In button given next to the Sign-Up button. Enter your login credentials here:

It will open up the following dashboard:

Get this API key and do not share it with anyone. You can also reset this API. Let's proceed to the following steps to test this API key.

Test the API Key

Open a new browser and navigate to the CurrenyFreaks documentation. Let's suppose we want to test this API endpoint:

Copy the above-highlighted endpoint and paste it to a new browser. Enter your API key where required and press the "Enter" button. If your API key is working fine, you will get the response as under:

If the API key has some problem, you will see something like this:

Since we successfully tested our API key, let's proceed towards building our application. 

Build the Application

As mentioned earlier, we should install Vue JS on our systems. For this purpose, navigate to the Vue JS website at: https://vuejs.org/ 

You can easily find the installation guide. Following the guide set up your system. 

Step 1: Set Up Your Vue.js Project

Create a new Vue.js project using Vue CLI. If you don't have Vue CLI installed, you can do so by running:

npm install -g @vue/cli

Then, create a new project:

vue create currency-exchange-widget

Navigate into the project folder:

cd currency-exchange-widget

Install Axios for API calls:

npm install axios

Open the project in your code editor. You'll primarily be working in the src folder.

Step 2: Create the Currency Exchange Component

Create a new file named CurrencyExchange.vue inside the src/components folder.

Copy the following code into CurrencyExchange.vue:

<template>
    <div id="currency-widget">
        <h2>Currency Exchange Rate</h2>

        <div class="input-group">
            <label for="fromCurrency">From:</label>
            <input type="text" v-model="searchFrom" placeholder="Search..." @input="filterFromCurrencies" />
            <select v-model="fromCurrency">
                <option v-for="currency in filteredFromCurrencies" :key="currency" :value="currency">{{ currency }}</option>
            </select>
        </div>

        <div class="input-group">
            <label for="toCurrency">To:</label>
            <input type="text" v-model="searchTo" placeholder="Search..." @input="filterToCurrencies" />
            <select v-model="toCurrency">
                <option v-for="currency in filteredToCurrencies" :key="currency" :value="currency">{{ currency }}</option>
            </select>
        </div>

        <div class="input-group">
            <label for="amount">Amount:</label>
            <input type="number" v-model="amount" />
        </div>

        <div id="result">{{ result }}</div>

        <button @click="convertCurrency">Convert</button>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            API_KEY: 'ADD-YOUR-API-KEY-HERE', // Replace with your CurrencyFreaks API key
            currencies: [],
            fromCurrency: 'USD',
            toCurrency: 'EUR',
            amount: 1,
            result: '',
            searchFrom: '',
            searchTo: ''
        };
    },
    computed: {
        filteredFromCurrencies() {
            return this.currencies.filter(currency => currency.toLowerCase().includes(this.searchFrom.toLowerCase()));
        },
        filteredToCurrencies() {
            return this.currencies.filter(currency => currency.toLowerCase().includes(this.searchTo.toLowerCase()));
        }
    },
    mounted() {
        this.fetchCurrencies();
    },
    methods: {
        async fetchCurrencies() {
            try {
                const response = await axios.get(`https://api.currencyfreaks.com/v2.0/rates/latest?apikey=${this.API_KEY}`);
                this.currencies = Object.keys(response.data.rates);
            } catch (error) {
                console.error('Error fetching currencies:', error);
            }
        },
        async convertCurrency() {
            try {
                const response = await axios.get(`https://api.currencyfreaks.com/v2.0/rates/latest?apikey=${this.API_KEY}&base=${this.fromCurrency}&symbols=${this.toCurrency}`);
                const rate = response.data.rates[this.toCurrency];
                const convertedAmount = (this.amount * rate).toFixed(2);
                this.result = `${this.amount} ${this.fromCurrency} = ${convertedAmount} ${this.toCurrency}`;
            } catch (error) {
                console.error('Error converting currency:', error);
            }
        }
    }
};
</script>

<style scoped>
body {
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: linear-gradient(to right, #2193b0, #6dd5ed);
}

#currency-widget {
    width: 400px;
    padding: 35px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    text-align: center;
    backdrop-filter: blur(10px);
    position: center;
    padding-left: 30%;
}

h2 {
    font-size: 2.2em;
    color: #1f2937;
    margin-bottom: 20px;
    letter-spacing: 1px;
    font-weight: bold;
}

h2::after {
    content: '';
    width: 60px;
    height: 4px;
    background: #ff8a00;
    display: block;
    margin: 10px auto;
}

.input-group {
    margin-bottom: 20px;
    position: relative;
}

label {
    font-size: 1.1em;
    color: #4b5563;
    margin-bottom: 8px;
    display: block;
}

select, input {
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1.1em;
    background-color: #f9fafb;
    transition: border-color 0.3s ease;
}

select:focus, input:focus {
    border-color: #ff8a00;
    outline: none;
}

#result {
    font-size: 1.6em;
    font-weight: bold;
    color: #1f2937;
    margin-top: 25px;
}

#currency-widget button {
    width: 100%;
    padding: 15px;
    background-color: #ff8a00;
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1.3em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#currency-widget button:hover {
    background-color: #da1b60;
}
</style>

Here's an explanation of the code provided above:

This code presents a currency converter written in Vue.js. The template is the body of the widget. It consists of two combo boxes for "from" and "to" currencies, an amount input, and a button for conversion. 

The input fields are bound to the database model using Vue's v-model. Any typing by the user is updated in real-time. 

The filterFromCurrencies and filterToCurrencies methods allow currency selection from the list based on user input. 

The script section demonstrates fetching currency rates from the CurrencyFreaks API using the axios library. 

When the 'convert' button is clicked, the selected currencies and amount are used for conversion. 

The computed properties filter the currencies displayed in the dropdown menus. It is shown in the styled div, resulting in proper string formatting in the #result div. 

The style section incorporates modern input fields with rounded corners, a gradient background, and responsive layouts. These features enhance the user experience.

Step 3: Update the App.vue

Open src/App.vue and replace its content with the following code to use your new component:

<template>

    <div id="app">

        <CurrencyExchange />

    </div>

</template>

<script>

import CurrencyExchange from './components/CurrencyExchange.vue';

export default {

    name: 'App',

    components: {

        CurrencyExchange

    }

};

</script>

<style>

#app {

    font-family: Avenir, Helvetica, Arial, sans-serif;

    text-align: center;

    color: #2c3e50;

    margin-top: 60px;

}

</style>

Explanation

In this section, it is the main entry point in a Vue.js application. The <template> section has a single div with the id="app". It displays a personalized component named CurrencyExchange. This component is imported from the file CurrencyExchange.vue within the components folder. 

In the <script> section, the component layout is configured. The main application, which is the primary component, imports the CurrencyExchange component. It registers it in the components object to be used in the application.

The <style> section provides basic styles to the div with id "app". It sets the font to "Avenir" or falls back to "Helvetica" and "Arial". It centers the text, applies a color, and adds a 60-pixel margin to the top for layout spacing. These styles offer a clean and neat appearance for the application's UI.

Step 4: Run Your Vue JS App

Start your development server by running:

npm run serve

Open your browser and go to http://localhost:8080. You should see your Currency Exchange Rate Widget.

Step 5: Testing the Functionality

Select different currencies, enter an amount, and click "Convert" to see the conversion result.

Use the search inputs to filter the currencies in the dropdowns.

Conclusion

Using Vue JS and CurrencyFreaks together provides an efficient currency conversion solution. CurrencyFreaks provides the most accurate currency rates. At the same time, Vue JS is easy to set up and learn, allowing developers to create responsive and interactive applications.

In the above guide, we made it simple for developers to create a currency conversion application. If you follow the steps properly, you can set it up within 5 to 10 minutes. However, you must ensure that these technologies match your project requirements. 

By using CurrencyFreaks' real-time currency data, users can access accurate exchange rates easily. The step-by-step approach includes obtaining the API key and testing it. This process guides even beginners through building the application.

This integration enhances user experience. It enables businesses and individuals to make informed financial decisions. Ultimately, this combination showcases modern web technologies' power in facilitating everyday transactions.

Free Currency Converter API: FAQs

Does CurrencyFreaks Free Currency Converter API Support Vue JS?

Yes. You can see through the tutorial given above that CurrencyFreaks supports Vue JS.

What Other Frameworks/Libraries Are Supported by CurrencyFreaks Free Currency Converter API?

Here are the languages supported by CurrencyFreaks:

• Shell

• Node.js

• Java

• Python

• PHP

• Ruby

• JS

• C#

• Go

• C

• Swift

Is It Secure to Rely on CurrencyFreaks? How?

CurrencyFreaks prioritizes security, which is why all requests to their server are SSL encrypted, even with their free plan.

What Learning Resources Are Available for CurrencyFreaks?

CurrencyFreaks provides comprehensive blog tutorials and documentation to help developers achieve its integration. 

Sign Up for free at CurrencyFreaks today - Create the perfect Vue JS currency app.