Top Vue Packages for Adding Telephone Input, Numeric Input, Dialog Boxes, and Tables
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:21:48

---
title: Top Vue Packages for Adding Telephone Input, Numeric Input, Dialog Boxes, and Tables
published: true
date: 2020-07-27 19:57:23 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/27/top-vue-packages-for-adding-telephone-input-numeric-input-dialog-boxes-and-tables/?utm_source=rss&utm_medium=rss&utm_campaign=top-vue-packages-for-adding-telephone-input-numeric-input-dialog-boxes-and-tables
---

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

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>

```

We use the `vue-numeric` component that comes with the package.

The `currency` is the string for the currency prefix.

`separator` is the thousands separator.

`v-model` binds the inputted value to the `price` state.

It also supports setting the min and max values for the number with `min` and `max` props.

We can also disable negative values.

Decimal precision can be changed with the `precision` prop.

The placeholder can be changed with the `placeholder` prop.

### vue-good-table

vue-good-table is a package to add tables to our Vue app.

To use it, first we install it by running:

```
npm i vue-good-table

```

Then we can use it by writing:

`main.js`

```
import Vue from "vue";
import App from "./App.vue";
import VueGoodTablePlugin from "vue-good-table";
import "vue-good-table/dist/vue-good-table.css";

Vue.use(VueGoodTablePlugin);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

```

`App.vue`

```
<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows" :search-options="{
    enabled: true
  }"></vue-good-table>
  </div>
</template>

<script>
import { VueGoodTable } from "vue-good-table";

export default {
  components: {
    VueGoodTable
  },
  data() {
    return {
      columns: [
        {
          label: "first",
          field: "firstName"
        },
        {
          label: "last",
          field: "lastName"
        },
        {
          label: "age",
          field: "age",
          type: "number"
        }
      ],
      rows: [
        { firstName: "james", lastName: "smith", age: 20 },
        { firstName: "alex", lastName: "green", age: 34 }
      ]
    };
  }
};
</script>

```

We have the `columns` with an array of column definitions.

Each entry has at least the `lavel` and `field` properties.

`type` is the column type which we can optionally specify.

We use the `vue-good-table` component to display the table.

`columns` and `rows` have the respective props.

`search-options` lets us change the search options.

`enabled` will enable it.

We get a table with a search bar to search the rows with a few lines of code.

Sorting is also included by default.

### vuejs-dialog

vue-dialog is a useful component for adding dialog boxes.

To use it, we install it by running:

```
npm i vuejs-dialog

```

Then we can use it by writing:

`main.js`

```
import Vue from "vue";
import App from "./App.vue";
import VuejsDialog from "vuejs-dialog";

import "vuejs-dialog/dist/vuejs-dialog.min.css";

Vue.use(VuejsDialog);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

```

`App.vue`

```
<template>
  <div></div>
</template>

<script>
export default {
  async mounted() {
    const dialog = await this.$dialog.alert("success!");
    console.log("closed");
  }
};
</script>

```

We just register the plugin and use the `this.$dialog.alert` method to open a dialog box.

### Conclusion

vue-tel-input lets us add a telephone input to our app.

vuejs-dialog is an easy to use package for us to add dialog boxes.

vue-good-table lets us add a table easily to our app.

vue-numeric is a useful numeric input.

The post [Top Vue Packages for Adding Telephone Input, Numeric Input, Dialog Boxes, and Tables](https://thewebdev.info/2020/07/27/top-vue-packages-for-adding-telephone-input-numeric-input-dialog-boxes-and-tables/) appeared first on [The Web Dev](https://thewebdev.info).