Currency conversion apps are widely used in modern financial and e-commerce applications. In this tutorial, we will build a Vuejs currency converter using a live exchange rates API to fetch real-time exchange rates.
You will learn how to integrate a Vue.js currency converter, fetch live data, and display accurate conversions using Vue’s reactivity system. We will also guide you through setting up the project and building the application step by step.
👉You can also explore our Python-based implementation to understand how currency conversion works in a different programming environment.
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 starting, get your API key from CurrencyFreaks. Once you have it, you can directly integrate it into your Vue.js application.
👉Go to the CurrencyFreaks website and explore their official documentation to understand available endpoints and features.
Build the Application
As mentioned earlier, we need to install Vue.js to start building the application. 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
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);
}
},
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);
}
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
If you are using Vue 3, you can also build this currency converter using the Composition API. This approach provides better code organization and reusability.
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 } 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.'
}
}
fetchCurrencies()
</script>
👉This version uses the Vue 3 Composition API with the
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
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.
Why Choose Vue.js for a Currency Converter App?
Here are some reasons to choose Vue.js:
Easy-to-learn frameworks are important in development. Vue.js has step-by-step documentation. This means you can quickly pick up and use the framework. Features can be built without unnecessary complexity. This is appreciated in smaller applications like the aforementioned currency converter.
Vue.js has a reactivity system. This system ensures that dynamic data updates occur in real time. This is especially important in a currency converter and improves the user experience by showing up-to-date conversion data without any other steps.
Vue.js is a lightweight framework that does NOT compromise performance. It is easy to build large applications because of the component system. This architecture allows code organization and a clean layout for reusability.
There are many other technologies that are in use today. These technologies, like the APIs mentioned, are important to include in development. Many frameworks fail to provide the things you are looking for in developing applications. With Vue.js, you really can make fully interactive currency converter applications without any development headaches.
Explore the 10 Best Currency Exchange APIs now!
Conclusion
This Vuejs currency converter demonstrates how to integrate real-time exchange rate data using Vue.js and CurrencyFreaks. By following the step-by-step implementation, developers can quickly build a functional, responsive currency converter that dynamically updates data as exchange rates change.
Using Vue’s reactive system along with CurrencyFreaks ensures accurate and efficient currency conversion with minimal effort. This combination provides a solid foundation for building financial and data-driven applications, making it easier for developers and businesses to deliver reliable user experiences.
Vue Currency Converter API: FAQs
How Do I Build a Vuejs Currency Converter?
You can build a VueJS currency converter by integrating an exchange rate API like CurrencyFreaks. Using Vue’s reactivity system, you can fetch real-time data and display accurate currency conversions efficiently. This approach works with both the Options API and the Composition API in Vue 3.
Does Vue 3 Support Real-Time Exchange Rate APIs?
Yes, Vue 3 fully supports real-time exchange rate APIs. You can use the Composition API and tools like axios to fetch and update live currency data efficiently.
What Is The Best Exchange Rate Api For Vue Js Applications?
CurrencyFreaks is one of the best options for Vue.js applications. It provides real-time exchange rates, easy API integration, and reliable performance for building a Vue.js currency converter.
Sign Up for free at CurrencyFreaks today - Create the perfect Vue JS currency app.
