Phone Number Input using Vue.js

In this, We will learn how to use the vue-phone-number-input in vue.js.

Phone Number Input:

A beautiful text field to format phone numbers created with Vue.js

Step 1: Create new Vue.js project:

vue create phone-number-input-demo

Step 2: Install require packages:

npm i vue-phone-number-input

Step 3: Open App.vue file and add the following in it:

<template>
  <div id="app">
    <div class="container">
      <VuePhoneNumberInput
        id="phoneNumber1"
        v-model="phoneNumber"
        color="dodgerblue"
        :dark="dark"
        :disabled="disabled"
        :ignored-countries="countriesIgnored"
        :preferred-countries="countriesList"
        :loader="hasLoaderActive"
        clearable
        :error="hasErrorActive"
        class="mb-2"
        @update="onUpdate"
      />
      <b>v-model</b> : {{ phoneNumber }}
    </div>
  </div>
</template>

<script>
import VuePhoneNumberInput from "vue-phone-number-input";
export default {
  name: "App",
  components: {
    VuePhoneNumberInput,
  },
  data() {
    return {
      phoneNumber: null,
      defaultCountry: "FR",
      countriesList: ["FR", "BE", "DE"],
      countriesIgnored: ["AF", "AD", "AL"],
      dark: false,
      disabled: false,
      hasLoaderActive: false,
      hasErrorActive: false,
    };
  },
  methods: {
    onUpdate(payload) {
      this.results = payload;
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Step 4: Open main.js file and add the following in it:

import Vue from 'vue'
import App from './App.vue'
import 'vue-phone-number-input/dist/vue-phone-number-input.css';

Vue.config.productionTip = false

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

 

Code in action: