Gathering detailed insights and metrics for vue-phone-number-input
Gathering detailed insights and metrics for vue-phone-number-input
Gathering detailed insights and metrics for vue-phone-number-input
Gathering detailed insights and metrics for vue-phone-number-input
@lbgm/phone-number-input
Simple Phone Number Input for VueJs
vue-phone-country-code
A phone number input made with Vue JS && libphonenumber-js
@diogoccoutinho/vue-international-phone
A Vue component for entering and validating international telephone numbers
vue-phone-number-input-maintained
A phone number input made with Vue JS && libphonenumber-js
A phone number input made with Vue JS (format & valid phone number)
npm install vue-phone-number-input
Typescript
Module System
Node Version
NPM Version
1.1.9: Sync input & loader color
Updated on Apr 27, 2020
1.1.8: auto-reconize country code and national number from number prefixed && support new version of libphonenumber-js
Updated on Apr 27, 2020
1.1.7: fix(country iso code) issue with update programmatically
Updated on Apr 12, 2020
Fix: Dark color management
Updated on Feb 14, 2020
1.1.5: Bug fix search feature of country selector
Updated on Feb 10, 2020
1.1.2: Fix form submit when you choose a country
Updated on Jan 06, 2020
Vue (56.85%)
CSS (21.21%)
JavaScript (19.97%)
SCSS (1.36%)
HTML (0.6%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
621 Stars
184 Commits
156 Forks
8 Watchers
22 Branches
6 Contributors
Updated on Jul 04, 2025
Latest Version
1.12.13
Package Id
vue-phone-number-input@1.12.13
Unpacked Size
4.00 MB
Size
0.96 MB
File Count
14
NPM Version
8.1.0
Node Version
16.13.0
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
A beautiful text field to format phone numbers made with VueJS
The version for Vue 2 is available here: maz-ui v2.x - MazPhoneNumberInput
The version for Vue 3 is available here: maz-ui v3.x - MazPhoneNumberInput
yarn add vue-phone-number-input
npm i --save vue-phone-number-input
1import VuePhoneNumberInput from 'vue-phone-number-input'; 2import 'vue-phone-number-input/dist/vue-phone-number-input.css'; 3 4Vue.component('vue-phone-number-input', VuePhoneNumberInput);
1<VuePhoneNumberInput v-model="yourValue" />
1<VuePhoneNumberInput v-model="yourValue" /> 2 3<script src="https://unpkg.com/vue" charset="utf-8"></script> 4<script src="./dist/vue-phone-number-input.umd.min.js" charset="utf-8"></script> 5<link rel="stylesheet" type="text/css" href="./dist/vue-phone-number-input.css"> 6 7<script type="text/javascript"> 8 Vue.component('vue-phone-number-input', window.VuePhoneNumberInput.default); 9</script>
preferred-countries
, ignored-countries
or have only-countries
valid-color
option) when the phone number is valid (can be disabled by no-validator-state
attr)no-use-browser-locale
) or you can use fetch-country
to get the country code via https://ip2c.org/s (network needed) - you can use default-country-code
option instead to set oneno-flags
propssize="sm|lg"
disabled
prop)dark
prop)clearable
(cf: VueInputUi options)loader
(cf: VueInputUi options)Props | Type | Required | Default |
---|---|---|---|
v-model | String/Int | true | - |
id | String | false | VuePhoneNumberInput |
color | String HEX | no | dogderblue |
valid-color | String HEX | no | yellowgreen |
error-color | String HEX | no | orangered |
size | String `sm | lg` | no |
default-country-code (1) | String | no | null |
preferred-countries (2) | Array<string> | no | null |
ignored-countries | Array<string> | no | null |
only-countries | Array<string> | no | null |
no-validator-state | Boolean | no | false |
no-flags | Boolean | no | false |
disabled | Boolean | no | false |
dark | Boolean | no | false |
dark-color | String (hex) | no | #424242 |
required | Boolean | no | false |
error | Boolean | no | false |
clearable | Boolean | no | false |
loader (3) | Boolean | no | false |
translations (4) | Object | no | null |
countries-height (5) | Number | no | 30 |
no-use-browser-locale (6) | Boolean | no | false |
fetch-country (7) | Boolean | no | false |
no-country-selector (8) | Boolean | no | false |
border-radius | Number | no | 4 |
show-code-on-list | Boolean | no | false |
no-example | Boolean | no | false |
(1) Ex : default-country-code="FR"
(2) Ex : preferred-countries="['FR', 'BE', 'DE']"
This countries will be at the top of the list
(3) Loader progress bar has the input color (color
props)
(4) translations comes to replace default texts - Ex :
1translations="{ 2 countrySelectorLabel: 'Code pays', 3 countrySelectorError: 'Choisir un pays', 4 phoneNumberLabel: 'Numéro de téléphone', 5 example: 'Exemple :' 6}"
(5) height in px of the rows included in the dropdown. Ex: countries-height: 40
(6) By default the component get country code via browser - No network needed but not work on SSR with NuxtJS (disable it with no-use-browser-locale
)
(7) Fetch country code via https://ip2c.org/s - Network needed - (Do not use it with default-country-code
options)
(8) The country selector is not shown, you can validate your phone number with the country code set
Event | Return |
---|---|
phone-number-focused | - (emit when phone number input is focused) |
phone-number-blur | - (emit when phone number input is blur) |
input | AsYouType value (emit when new value is enter on phone number input && when a country is choosed) |
update | All values (cf values in table on demo) (emit when new value is enter on phone number input && when a country is choosed) |
Props | Action |
---|---|
ArrowDown | Navigation down in countries list |
ArrowUp | Navigation up in countries list |
Escape | Close countries list |
All letters characters | Searching country name in countries list (should be open) |
Slot | Action |
---|---|
arrow | Override the default arrow character for toggling the list of countries |
1npm install
1npm run serve
1npm run lint
This project is licensed under MIT License
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
75 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More