Create a Currency Converter with Vue 3 and JavaScript

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a currency converter with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create currency-converter

and select all the default options to create the project.

Create the Currency Converter

To create the currency converter, we write:

<template>
  <form @submit.prevent="convert">
    <div>
      <label>value</label>
      <input v-model.number="value" />
    </div>
    <div>
      <label>from currency</label>
      <select v-model="fromCurrency">
        <option v-for="c of fromCurrencies" :key="c">{{ c }}</option>
      </select>
    </div>
    <div>
      <label>to currency</label>
      <select v-model="toCurrency">
        <option v-for="c of toCurrencies" :key="c">{{ c }}</option>
      </select>
    </div>
    <button type="submit">convert</button>
  </form>
  <div>
    {{ value }} {{ fromCurrency }} is {{ result.toFixed(2) }} {{ toCurrency }}
  </div>
</template>

<script>
const currencies = ["EUR", "USD", "CAD"];
export default {
  name: "App",
  data() {
    return {
      value: 0,
      fromCurrency: "",
      toCurrency: "",
      currencies,
      result: 0,
    };
  },
  computed: {
    fromCurrencies() {
      const { toCurrency, currencies } = this;
      return currencies.filter((c) => c !== toCurrency);
    },
    toCurrencies() {
      const { fromCurrency, currencies } = this;
      return currencies.filter((c) => c !== fromCurrency);
    },
    formValid() {
      const { value, fromCurrency, toCurrency } = this;
      return +value >= 0 && fromCurrency && toCurrency;
    },
  },
  methods: {
    async convert() {
      const { fromCurrency, toCurrency, value, formValid } = this;
      if (!formValid) {
        return;
      }
      const res = await fetch(
        `https://api.exchangeratesapi.io/latest?base=${fromCurrency}`
      );
      const { rates } = await res.json();
      this.result = value * rates[toCurrency];
    },
  },
};
</script>

We have a form that has an input to enter the value of the currency to convert form.

The from currency dropdown lets us choose the currency to convert from.

And the to currency dropdown lets us choose the currency to convert to.

We bind all the values from the input and select dropdowns to reactive properties with v-model .

The @submit directive listens to the submit event which is emitted when we click convert.

The prevent modifier lets us do client-side form submission.

In the script tag, we have the currencies array with the currencies list.

The data method returns the reactive properties we use.

The fromCurrencies computed property has the list of currencies we can convert from.

We filter out the one that we chose in the to currency dropdown.

The toCurrencies dropdown is similarly used for the to currency dropdown and filters out the choice chosen in the from currency dropdown.

The formValid computed property checks if value is bigger than or equal to 0.

The convert method gets the exchange rate from the free Foreign exchange rates API.

The base query parameter sets the currency to convert from.

We get the rates with fetch and use that to compute the result.

Conclusion

We can create a currency converter easily with Vue 3 and JavaScript.