Create a Height Converter App 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 height 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 height-converter

and select all the default options to create the project.

Create the Height Convert App

To create the height converter app, we write:

<template>
  <form @submit.prevent="submit">
    <div>
      <label>feet</label>
      <input v-model.number="feet" />
    </div>
    <div>
      <label>inches</label>
      <input v-model.number="inches" />
    </div>
    <button type="submit">calculate</button>
  </form>
  <p>{{ centimeters }} cm</p>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      feet: 0,
      inches: 0,
      centimeters: 0,
    };
  },
  computed: {
    formValid() {
      const { feet, inches } = this;
      return +feet >= 0 && +inches >= 0;
    },
  },
  methods: {
    submit() {
      if (!this.formValid) {
        return;
      }
      const { feet, inches } = this;
      this.centimeters = (feet + inches / 12) * 12 * 2.54;
    },
  },
};
</script>

To create the height converter, we create a form with 2 inputs.

One input is for entering the number of feet.

The other one is for entering the number of inches.

We bind them to the feet and inches reactive properties with v-model .

number lets us convert the entered value to a number.

Then in the component object, we have the data method to return the reactive properties and their initial values.

We listen for the submit event with the @submit directive.

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

The formValid computed property checks whether the feet and inches values are valid.

And in the submit method, we check if the entered values are valid with formValid .

Then we compute the centimeters from the feet and inches .

We convert everything to feet in the parentheses.

Then we multiply by 12 to get the inches.

And then we multiply that by 2.54 to get the centimeters.

Then we show the centimeters value in the template.

Conclusion

We can create a height converter with Vue 3 and JavaScript.