Ex No: 12 DISTANCE CONVERSION IN VUE.JS
Aim: To create two text box one for kilometer and another for meter. When value is enterd in any one box the other distance measure is to be calculated.
Procedure
Step1: Install Node Package Manager (npm) in the system.
Step2: Create New Vue.js project using "npm create vue@latest".
Step3: Open the created project folder and install the dependencies using "npm install".
Step4: Create two components "AppTitle.vue" and "ConvElm.vue" place the components in projects src > components folder.
Step6: Include the created components in "App.vue" file and provide proper template and CSS to show the compnents.
Step7: Run the code using "npm run dev".
Source Code

App.vue


<script setup>
import { ref } from 'vue';
import AppTitle from './components/AppTitle.vue';
import CalcElm from './components/ConvElm.vue';
</script>

<script>
export default {
  components: {
    AppTitle,
    CalcElm
  }
}
</script>

<template>
  <header>
    <AppTitle title="Distance Conversion" class="css-title"/>
  </header>
  <main>
    <div>
      <CalcElm />
    </div>
  </main>
  <footer>
    <AppTitle title="Developed by K. Anbarasan" class="css-footer" />
  </footer>
</template>

<style scoped>

main{
  height: 200px;
 }
 main >div{
  padding: 10px;
 }

@media (min-width: 1024px) {
 main{
  height: 400px;
 }
}
</style>

AppTitle.vue


<script setup>
defineProps({
  title: {
    type: String,
    required: true
  }
});
</script>

  <template>
    <div>
      <h1>{{ title }}</h1>
    </div>
  </template>
  
  
  <style>
  .css-title {
    text-align: center;
    display: block;
    height: 100px;
    width: auto;
    background-color:rgb(175, 244, 101);
    color: red;
    text-decoration: underline;
    border-radius: 10px;
  }
  
  .css-footer {
    text-align: center;
    display: block;
    height: 100px;
    width: auto;
    font-size: 10px;
    background-color:rgb(206, 227, 228);
    color: red;
    text-decoration: underline;
    border-radius: 10px;
  }
  </style>

ConvElm.vue


  <template>
    <div class="inp">
        <label for="km" >Kilometer: </label> 
        <input type="number" id="km" v-model="km" @input="conv_Mtr" placeholder="Enter Kilometer Value">
    </div>
    <div class="inp">
        <label for="mtr" >Meter: </label> 
        <input type="number" id="mtr" v-model="mtr" @input="conv_Km" placeholder="Enter Meter Value">
    </div>
</template>

<script>
export default {
  data() {
    return {
      km: null,
      mtr: null,
    };
  },
  methods: {
    conv_Mtr(){
      if(this.km !==null)
      {
        this.mtr = this.km * 1000;
      }
    },
    conv_Km(){
      if(this.mtr !== null)
      {
        this.km = this.mtr / 1000;        
      }
    }    
  }
};
</script>

<style scoped>
.inp{
    padding: 10px;   
}
.inp label{
  width: 100px;
  display: inline-block;
}
.inp input{
    border-radius: 5px;
    height: 30px;
}

</style>
Result: Thus vue.js application is created to perform distance conversion.