Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at how the best packages for adding telephone input, dialog boxes, numeric inputs, and tables.

vue-tel-input

vue-tel-input is a package that lets us add a phone number input to a Vue app.

To install it, we run:

npm i vue-tel-input

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueTelInput from "vue-tel-input";

Vue.use(VueTelInput);
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <vue-tel-input v-model="phone"></vue-tel-input>
    <p>{{phone}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: ""
    };
  }
};
</script>

We have the vue-tel-input which we can bind the input value with v-model .

Now we should see a dropdown which shows the country.

Then we can enter the phone number in the input box.

It provides us with many options like setting the default country, max length, placeholder, focus, and more.

It also emits events when the input value is changed, when the country is changed, and more.

Also, it provides a slot for changing the arrow icon.

vue-numeric

vue-numeric lets us add a numeric input to our Vue app.

We can install it by running:

npm i vue-numeric

Then we can use it by writing:

<template>
  <div>
    <vue-numeric currency="$" separator="," v-model="price"></vue-numeric>
    <p>{{price}}</p>
  </div>
</template>

<script>
import VueNumeric from "vue-numeric";
export default {
  components: {
    VueNumeric
  },
  data() {
    return {
      price: 0
    };
  }
};
</script>

#web-development #software-development #programming #vue #vue.js