Gathering detailed insights and metrics for vue-phone-number-input
Gathering detailed insights and metrics for vue-phone-number-input
A phone number input made with Vue JS (format & valid phone number)
Installations
npm install vue-phone-number-inputDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.13.0
NPM Version
8.1.0
Releases
28
1.1.9: Sync input & loader color
1.1.9
Updated on Apr 27, 2020
1.1.8: auto-reconize country code and national number from number prefixed && support new version of libphonenumber-js
1.1.8
Updated on Apr 27, 2020
1.1.7: fix(country iso code) issue with update programmatically
1.1.7
Updated on Apr 12, 2020
Fix: Dark color management
1.1.6
Updated on Feb 14, 2020
1.1.5: Bug fix search feature of country selector
1.1.5
Updated on Feb 10, 2020
1.1.2: Fix form submit when you choose a country
1.1.2
Updated on Jan 06, 2020
Languages
5
Vue
CSS
JavaScript
SCSS
HTML
Vue (56.85%)
CSS (21.21%)
JavaScript (19.97%)
SCSS (1.36%)
HTML (0.6%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
621 Stars
184 Commits
156 Forks
8 Watchers
22 Branches
6 Contributors
Updated on Jul 04, 2025
Maintainers
1
Package Meta Information
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
Total Downloads
Cumulative downloads
Total Downloads
NaN
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
Weekly Downloads
Monthly Downloads
Yearly Downloads
vue-phone-number-input
A beautiful text field to format phone numbers made with VueJS
⚠️ This plugin is unmaintained ⚠️
Version for Vue 2 on maz-ui v2.x
The version for Vue 2 is available here: maz-ui v2.x - MazPhoneNumberInput
New version for Vue 3 on maz-ui v3.x
The version for Vue 3 is available here: maz-ui v3.x - MazPhoneNumberInput
Demo
Installation
Using yarn
yarn add vue-phone-number-input
Using npm
npm i --save vue-phone-number-input
Usage
ES6 Modules / CommonJS
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" />
UMD
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>
Features List
- You can set
preferred-countries,ignored-countriesor haveonly-countries - Validator State: input becomes green (you can modify this color with
valid-coloroption) when the phone number is valid (can be disabled byno-validator-stateattr) - Multi options to getting country code : By default the component get the country code via the browser (disable it with
no-use-browser-locale) or you can usefetch-countryto get the country code via https://ip2c.org/s (network needed) - you can usedefault-country-codeoption instead to set one - Phone number formatting while typing
- You can search your country in list (open countries list & type your country name)
- Keyboard accessibility (Arrow down, Arrow up: Countries list navigation - Escape: Close countries list)
- Phone number example for each country in placeholder/label
- Auto focus phone number input after selecting country
- You can disable the flags -
no-flagsprops - Set your translations
All options of VueInputUi are available
- Differents size of input (sm or lg)
size="sm|lg" - Disabled option (
disabledprop) - Dark UI option (
darkprop) - Active a clear button by the prop
clearable(cf: VueInputUi options) - Active a loader progress bar by the prop
loader(cf: VueInputUi options) - And others
Props API
| 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
Events API
| 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) |
Keyboard accessibility
| 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) |
Named slots
| Slot | Action |
|---|---|
| arrow | Override the default arrow character for toggling the list of countries |
Contribution
Project setup
1npm install
Compiles and hot-reloads for development
1npm run serve
Lints and fixes files
1npm run lint
License
This project is licensed under MIT License
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
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
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 3 are checked with a SAST tool
Reason
75 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
- Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-vf6r-87q4-2vjf
- Warn: Project is vulnerable to: GHSA-8g77-54rh-46hx
- Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
- Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
- Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
- Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
1.7
/10
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