Category: Vue

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.

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 recipe app 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 recipe-app

and select all the default options to create the project.

We also need the uuid package to let us generate unique IDs for our to-do items.

To do this, we run:

npm i uuid

Create the Recipe App

To create the recipe app, we write:

<template>
  <form @submit.prevent="addRecipe">
    <div>
      <label>name</label>
      <input v-model="recipe.name" />
    </div>
    <div>
      <label>ingredients</label>
      <textarea v-model="recipe.ingredients"></textarea>
    </div>
    <div>
      <label>steps</label>
      <textarea v-model="recipe.steps"></textarea>
    </div>
    <button type="submit">add recipe</button>
  </form>
  <div v-for="(r, index) of recipes" :key="r.id">
    <h1>{{ r.name }}</h1>
    <h2>ingredients</h2>
    <div class="content">{{ r.ingredients }}</div>
    <h2>steps</h2>
    <div class="content">{{ r.steps }}</div>
    <button type="button" @click="deleteRecipe(index)">delete</button>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
export default {
  name: "App",
  data() {
    return {
      recipe: {
        name: "",
        ingredients: "",
        steps: "",
      },
      recipes: [],
    };
  },
  computed: {
    formValid() {
      const { name, ingredients, steps } = this.recipe;
      return name && ingredients && steps;
    },
  },
  methods: {
    addRecipe() {
      if (!this.formValid) {
        return;
      }
      this.recipes.push({
        id: uuidv4(),
        ...this.recipe,
      });
    },
    deleteRecipe(index) {
      this.recipes.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.content {
  white-space: pre-wrap;
}
</style>

In the template, we have a form that has the name, ingredients, and steps fields.

We bind the values inputted into the input or textarea with v-model to reactive properties.

The @submit directive lets us submit the form when the add recipe button is clicked.

prevent lets us do client-side form submission instead of server-side.

Below that, we have divs that renders the recipes added with v-for .

We’ve to set the key prop to a unique ID so that Vue 3 can identify the rendered items.

Inside the div, we display the content added, and a button that calls deleteRecipe when we click it to delete an entry.

In the script tag, we have the data method that returns the reactive properties we use.

The formValid reactive property checks whether each field is filled in.

The addRecipe method checks the formValid reactive property to see if the form is valid.

Then we call push if it is to add an entry to the recipes array.

The uuidv4 function generates a unique ID for the entry.

The deleteRecipe method calls splice to remove the entry with the given index.

In the style tag, we have white-space: pre-wrap; applied to preserve whitespace in the divs with the given class.

Conclusion

We can create a recipe app easily 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 PIN pad 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 pin-pad

and select all the default options to create the project.

Create the PIN Pad

To create the PIN pad, we write:

<template>
  <div>{{ pin }}</div>
  <div>
    <div>
      <button @click="pin += '1'">1</button>
      <button @click="pin += '2'">2</button>
      <button @click="pin += '3'">3</button>
    </div>
    <div>
      <button @click="pin += '4'">4</button>
      <button @click="pin += '5'">5</button>
      <button @click="pin += '6'">6</button>
    </div>
    <div>
      <button @click="pin += '7'">7</button>
      <button @click="pin += '8'">8</button>
      <button @click="pin += '9'">9</button>
    </div>
    <div>
      <button @click="pin = pin.slice(0, pin.length - 1)">&lt;</button>
      <button @click="pin += '0'">0</button>
      <button @click="pin = ''">C</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      pin: "",
    };
  },
};
</script>

We display the pin at the top of the template.

Then we add buttons into the div.

In the number keys, we have the @click directive to append the corresponding characters to pin .

The backspace (<) button calls slice to return the pin string without the last character and assign it to pin .

And the C key clears the pin by assigning it to an empty string.

Now when we click on the keys, we see the PIN update.

Conclusion

We can create our own PIN pad easily 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 tic tac toe game 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 tic-tac-toe

and select all the default options to create the project.

Create the Tic Tac Toe

To create the tic tac toe game, we write:

<template>
  <div v-if="xWins || oWins">
    <div v-if="xWins">x wins</div>
    <div v-if="oWins">o wins</div>
    <button @click="restart">restart</button>
  </div>
  <form v-else>
    <div v-for="i in 3" :key="i">
      <span v-for="j in 3" :key="j">
        <input v-model.trim="board[i - 1][j - 1]" style="width: 20px" />
      </span>
    </div>
  </form>
</template>

<script>
const board = [[], [], []];

export default {
  name: "App",
  data() {
    return {
      board,
    };
  },
  computed: {
    xWins() {
      return this.isWinner("x");
    },
    oWins() {
      return this.isWinner("o");
    },
  },
  methods: {
    restart() {
      this.board = [[], [], []];
    },
    isWinner(player) {
      const { board } = this;
      return (
        (board[0][0] === player &&
          board[0][1] === player &&
          board[0][2] === player) ||
        (board[1][0] === player &&
          board[1][1] === player &&
          board[1][2] === player) ||
        (board[2][0] === player &&
          board[2][1] === player &&
          board[2][2] === player) ||
        (board[0][0] === player &&
          board[1][0] === player &&
          board[2][0] === player) ||
        (board[0][1] === player &&
          board[1][1] === player &&
          board[2][1] === player) ||
        (board[0][2] === player &&
          board[1][2] === player &&
          board[2][2] === player) ||
        (board[0][0] === player &&
          board[1][1] === player &&
          board[2][2] === player) ||
        (board[0][2] === player &&
          board[1][1] === player &&
          board[2][0] === player)
      );
    },
  },
};
</script>

In the template, we have a div that displays the outcome of the game if there is one.

If either x or o wins, we display who wins.

Also, we add a restart button so that the game can be restarted.

Otherwise, we display the game board.

We use v-for to render 3 inputs.

And we render inputs to let players enter the value.

We bind the inputted value to the board nested array entry with v-model .

The trim modifier lets us trim the leading and trailing whitespace of the inputted value.

In the script tag, we have the board array, which we use as the initial value of the board reactive property.

Then we have the xWins and oWins computed properties to determine who wins.

The winner is determined by the isWinner method, which checks if any player has their marker on the board either diagonally, vertically, or horizontally.

Conclusion

We can create a tic tac toe game easily 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 password generator app 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 pomodoro-timer

and select all the default options to create the project.

Create the Pomodoro Timer

To create the Pomodoro timer app, we write:

<template>
  <h1>Pomodoro Timer</h1>
  <button @click="start">start</button>
  <div>{{ secondsLeft }} seconds left</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      secondsLeft: 25 * 60,
      timer: undefined,
    };
  },
  methods: {
    start() {
      this.timer = setInterval(() => {
        this.secondsLeft--;
        if (this.secondsLeft === 0) {
          clearInterval(this.timer);
        }
      }, 1000);
    },
  },
  beforeUnmount() {
    clearInterval(this.timer);
  },
};
</script>

In the template, we have the start button to let us start the timer when we click it.

The div displays the number of seconds left before the time is up.

In the data method, we return reactive properties with the secondsLeft and the timer reactive properties.

The start method calls setInterval to start the timer.

We decrement the secondsLeft reactive property’s value until secondsLeft is 0.

If it’s 0, then we call clearInterval to clear the timer.

1000 is the interval to wait before the callback runs again.

In the beforeUnmount hook, we call clearInterval to clear the timer when we unmount the component.

When we click start, we should see the seconds count down on the page.

Conclusion

We can create a Pomodoro timer easily with Vue 3 and JavaScript.