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 appeared first on The Web Dev.