Vue js 3 + vue-phone-number-input

May 23, 2022

I tried to install this dependency but every time i’ve told that it’s not existing and vue 3 cannot relove it component .

https://www.npmjs.com/package/vue-phone-number-input

thank you for helping me
enter image description here

>Solution :

Try the following

Open App.vue file and add the following to 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>

Then, Open the main.js file and add the following to 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')

Hope this works!