Create a Weight Converter App with Vue 3 and JavaScript

ttps%3A%2F%2Funsplash.com%3Futm_source%3Dmedium%26utm_medium%3Dreferral)

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 weight converter 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 weight-converter

and select all the default options to create the project.

Create the Weight Converter App

To create the weight converter app, we write:

<template>
  <form>
    <div>
      <label>weight in pounds</label>
      <input v-model.number="weightInLb" />
    </div>
  </form>
  <p>{{ weightInKg }} kg</p>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      weightInLb: 0,
    };
  },
  computed: {
    weightInKg() {
      const { weightInLb } = this;
      return +weightInLb * 0.453592;
    },
  },
};
</script>

We add the form with input to let users enter the weight in pounds/

We bind the inputted value to the weightInLb reactive property with v-model .

The number modifier lets us prevent server-side submission.

In the data method, we return an object with the weightInLb reactive property.

Then we create the weightInKg computed property to convert the weight in pounds to the equivalent weight in kilograms.

Then we display weightInKg in the template.

Now when we type in the weight in pounds, we see the weight in kilograms automatically.

weightInKg is a reactive property, so weightInKg updates automatically when it changes.

Conclusion

We can create a weight calculator app easily with Vue 3 and JavaScript.