Currency conversion apps have become a mainstay of modern financial and e-commerce applications. This tutorial will show us how to build one using Vuejs and an exchange rates API to provide real-time exchange rates.
Learn to integrate a currency converter using the Vue.js currency conversion library, fetch real-time data feeds, and display accurate conversions using its reactive system. We will also walk you through setting up and creating the application step by step.
👉Discover our Python-based implementation to gain a greater insight into currency conversion in different programming environments.
Steps to Build a Vue.js Currency Converter Using an Exchange Rate API
Let’s explore the easiest steps to build a Vuejs currency converter.
Get the Free Currency Converter API Key
Before getting started, obtain your API key from CurrencyFreaks and integrate it directly into your Vue.js application.
When done so, head over to their website and read up on their official documentation for understanding all their endpoints and features.
Build the Application
As stated previously, to begin our application development, we need to install Vue.js first. For this, go 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
Vue.js Exchange Rate API Integration with Axios
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);
this.result = 'Failed to fetch currencies. Please refresh the page.';
}
},
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);
this.result = 'Conversion failed. Please try again later.';
}
}
}
};
</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);
}
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 is the explanation for the above code:
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 component data 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.
Currency Converter Vue 3 Using Composition API
For Vue 3 users building currency converters, using the Composition API can improve code organization and reuse. This approach ensures greater code organization and reuse.
Here is a simple version using the Composition API (this uses the same template and styling as the Options API component shown above. Only the script logic changes):
<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
const API_KEY = 'ADD-YOUR-API-KEY-HERE'
const currencies = ref([])
const fromCurrency = ref('USD')
const toCurrency = ref('EUR')
const amount = ref(1)
const result = ref('')
const fetchCurrencies = async () => {
try {
const response = await axios.get(
`https://api.currencyfreaks.com/v2.0/rates/latest?apikey=${API_KEY}`
)
currencies.value = Object.keys(response.data.rates)
} catch (error) {
console.error('Error fetching currencies:', error)
result.value = 'Failed to fetch currencies. Please refresh the page.'
}
}
const convertCurrency = async () => {
try {
const response = await axios.get(
`https://api.currencyfreaks.com/v2.0/rates/latest?apikey=${API_KEY}&base=${fromCurrency.value}&symbols=${toCurrency.value}`
)
const rate = response.data.rates[toCurrency.value]
if (!rate) {
result.value = 'Invalid currency selection. Please try again.'
return
}
const convertedAmount = (amount.value * rate).toFixed(2)
result.value = `${amount.value} ${fromCurrency.value} = ${convertedAmount} ${toCurrency.value}`
} catch (error) {
console.error('Error converting currency:', error)
result.value = 'Conversion failed. Please try again later.'
}
}
onMounted(fetchCurrencies)
</script>
👉This version uses the Vue 3 Composition API with setup syntax to create reactive variables using ref(), while onMounted executes code when our component is ready, serving as an alternative lifecycle hook.
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
Here, it serves as the primary entry point for a Vue.js application. There is one div inside the <template> section with the id=app. It shows a customized element referred to as CurrencyExchange. This element is exported in the file CurrencyExchange.vue in the components folder.
The component layout is configured in the section of the script. The primary component, which is the main application, imports the CurrencyExchange component. It adds it to the components object that is to be used in the application.
- The <style> section provides basic styles to the div with id "app".
- It uses the Avenir font or resorts to Helvetica and Arial.
- It makes the text centered, uses some form of color, and adds a 60-pixel margin at the top of the text to give the text some spacing during layout.
👉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.
Why Choose Vue.js for a Currency Converter App?
Here are some reasons to choose Vue.js:
Easy-to-learn frameworks such as Vue.js are critical in development. The reason? Their step-by-step documentation makes for quick learning curves and feature creation without extraneous complexity.
Vue.js includes an advanced reactive system that ensures data updates instantly. This is something particularly helpful when used for currency converters. It also helps improve user experience. Vue JS provides up-to-date conversion information without extra steps.
Vue.js is an efficient, lightweight framework that does not compromise performance, making large application development simpler thanks to its component system and clean architecture that facilitates code reuse and organization.
Today, numerous technologies play an integral role in application development. Frameworks often fail to deliver what developers require when developing apps; with Vue.js, however, you can quickly build fully interactive currency converter applications without incurring development headaches.
Explore the 10 Best Currency Exchange APIs now!
Conclusion
This Vue.js currency converter demonstrates how to integrate real-time exchange rate data using Vue.js and CurrencyFreaks. A step-by-step implementation allows developers to quickly build a functional currency converter that dynamically updates as exchange rates change.
Vue's reactive system, coupled with CurrencyFreaks, ensures accurate and efficient currency conversion with minimal effort. As a result, building financial and data-driven applications is much simpler for developers and businesses alike. Together, they form a reliable user experience.
Vue Currency Converter API: FAQs
How Do I Build a Vuejs Currency Converter?
A VueJS currency converter can be created by integrating an exchange rate API like CurrencyFreaks into its code. Using Vue's reactive system to gather real-time currency conversion data and display accurate currency conversions efficiently. This approach works well with both the Options API and Composition API in Vue 3.
Does Vue 3 Support Real-Time Exchange Rate APIs?
Absolutely. Vue 3 fully supports real-time exchange rate APIs through tools like the Composition API and Axios that let you efficiently retrieve and update live currency data.
What Is The Best Exchange Rate Api For Vue Js Applications?
CurrencyFreaks stands out as one of the premier solutions for building Vue.js currency converter applications. As a result, providing real-time exchange rates and easy API integration for efficient performance.
Sign Up for free at CurrencyFreaks today - Create the perfect Vue JS currency app.
