Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

92
Views
Vue js 3 + vue-phone-number-input

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

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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!

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!