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:

  <div id="app">
    <div class="container">
      <b>v-model</b> : {{ phoneNumber }}

import VuePhoneNumberInput from "vue-phone-number-input";
export default {
  name: "App",
  components: {
  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;

#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;

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),


Code in action:


Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories