{"id":14973758,"url":"https://github.com/louismazel/vue-phone-number-input","last_synced_at":"2025-05-15T11:05:31.045Z","repository":{"id":37774117,"uuid":"166092032","full_name":"LouisMazel/vue-phone-number-input","owner":"LouisMazel","description":"A phone number input made with Vue JS (format \u0026 valid phone number)","archived":false,"fork":false,"pushed_at":"2023-12-27T18:46:54.000Z","size":10048,"stargazers_count":616,"open_issues_count":65,"forks_count":155,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-14T16:58:59.102Z","etag":null,"topics":["input","number","phone","phone-number","virtual-list-dom","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://louismazel.github.io/vue-phone-number-input","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LouisMazel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-01-16T18:43:37.000Z","updated_at":"2025-04-12T13:14:22.000Z","dependencies_parsed_at":"2024-01-23T17:10:04.342Z","dependency_job_id":"dde0a234-66b5-400e-b09d-53879315f937","html_url":"https://github.com/LouisMazel/vue-phone-number-input","commit_stats":{"total_commits":179,"total_committers":6,"mean_commits":"29.833333333333332","dds":0.03910614525139666,"last_synced_commit":"29acf288f1e178c106c6f75a61dad849c696515a"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LouisMazel%2Fvue-phone-number-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LouisMazel%2Fvue-phone-number-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LouisMazel%2Fvue-phone-number-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LouisMazel%2Fvue-phone-number-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LouisMazel","download_url":"https://codeload.github.com/LouisMazel/vue-phone-number-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254328385,"owners_count":22052632,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["input","number","phone","phone-number","virtual-list-dom","vue","vuejs"],"created_at":"2024-09-24T13:49:22.165Z","updated_at":"2025-05-15T11:05:31.023Z","avatar_url":"https://github.com/LouisMazel.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-phone-number-input\n\n[![license](https://img.shields.io/github/license/LouisMazel/vue-phone-number-input.svg?style=flat-square)](https://github.com/LouisMazel/vue-phone-number-input/blob/master/LICENSE)\n[![vue 2](https://img.shields.io/badge/vue-2-42b983.svg?style=flat-square)](https://vuejs.org)\n[![npm](https://img.shields.io/npm/v/vue-phone-number-input.svg?style=flat-square)](https://www.npmjs.com/package/vue-phone-number-input)\n[![npm](https://img.shields.io/npm/dt/vue-phone-number-input.svg?style=flat-square)](https://www.npmjs.com/package/vue-phone-number-input)\n[![Codacy grade](https://img.shields.io/codacy/grade/3d15a7c11bfe47c69a2aed93cc67cc29.svg?style=flat-square)](https://www.codacy.com/app/LouisMazel/vue-phone-number-input)\n\n[![npm](https://nodei.co/npm/vue-phone-number-input.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://www.npmjs.com/package/vue-phone-number-input)\n\n\u003e A beautiful text field to format phone numbers made with VueJS\n\n---\n\n## ⚠️ This plugin is unmaintained ⚠️\n\n### Version for Vue 2 on [maz-ui v2.x](https://louismazel.github.io/maz-ui)\n\nThe version for **Vue 2** is available here: **[maz-ui v2.x - MazPhoneNumberInput](https://louismazel.github.io/maz-ui/documentation/maz-phone-number-input)**\n\n### New version for Vue 3 on [maz-ui v3.x](https://maz-ui.com)\n\nThe version for **Vue 3** is available here: **[maz-ui v3.x - MazPhoneNumberInput](https://maz-ui.com/components/maz-phone-number-input.html)**\n\n---\n\n![vue-phone-number-input](./public/vue-phone-number-input-demo.gif)\n\n## Demo\n\n[Enjoy](https://louismazel.github.io/vue-phone-number-input/)\n\n## Installation\n\n### Using yarn\n\n`yarn add vue-phone-number-input`\n\n### Using npm\n\n`npm i --save vue-phone-number-input`\n\n## Usage\n\n### ES6 Modules / CommonJS\n\n```js\nimport VuePhoneNumberInput from 'vue-phone-number-input';\nimport 'vue-phone-number-input/dist/vue-phone-number-input.css';\n\nVue.component('vue-phone-number-input', VuePhoneNumberInput);\n```\n\n```html\n\u003cVuePhoneNumberInput v-model=\"yourValue\" /\u003e\n```\n\n### UMD\n\n```html\n\u003cVuePhoneNumberInput v-model=\"yourValue\" /\u003e\n\n\u003cscript src=\"https://unpkg.com/vue\" charset=\"utf-8\"\u003e\u003c/script\u003e\n\u003cscript src=\"./dist/vue-phone-number-input.umd.min.js\" charset=\"utf-8\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./dist/vue-phone-number-input.css\"\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n  Vue.component('vue-phone-number-input', window.VuePhoneNumberInput.default);\n\u003c/script\u003e\n```\n\n## Features List\n\n- You can set `preferred-countries`, `ignored-countries` or have `only-countries`\n- Validator State: input becomes green (you can modify this color with `valid-color` option) when the phone number is valid (can be disabled by `no-validator-state` attr)\n- 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 use `fetch-country` to get the country code via [https://ip2c.org/s](https://ip2c.org/s) (network needed) - you can use `default-country-code` option instead to set one\n- Phone number formatting while typing\n- You can search your country in list (open countries list \u0026 type your country name)\n- Keyboard accessibility (Arrow down, Arrow up: Countries list navigation -  Escape: Close countries list)\n- Phone number example for each country in placeholder/label\n- Auto focus phone number input after selecting country\n- You can disable the flags - `no-flags` props\n- Set your translations\n\n### All options of [VueInputUi](https://github.com/LouisMazel/vue-input-ui) are available\n\n- Differents size of input (sm or lg) `size=\"sm|lg\"`\n- Disabled option (`disabled` prop)\n- Dark UI option (`dark` prop)\n- Active a clear button by the prop `clearable` (cf: [VueInputUi options](https://github.com/LouisMazel/vue-input-ui#props-api))\n- Active a loader progress bar by the prop `loader`  (cf: [VueInputUi options](https://github.com/LouisMazel/vue-input-ui#props-api))\n- And others\n\n## Props API\n\n| Props                     | Type            | Required | Default             |\n|---------------------------|-----------------|----------|---------------------|\n| v-model                   | String/Int      | true     | -                   |\n| id                        | String          | false    | VuePhoneNumberInput |\n| color                     | String `HEX`    | no       | dogderblue          |\n| valid-color               | String `HEX`    | no       | yellowgreen         |\n| error-color               | String `HEX`    | no       | orangered           |\n| size                      | String `sm|lg`  | no       | null                |\n| default-country-code (1)  | String          | no       | null                |\n| preferred-countries (2)   | Array`\u003cstring\u003e` | no       | null                |\n| ignored-countries         | Array`\u003cstring\u003e` | no       | null                |\n| only-countries            | Array`\u003cstring\u003e` | no       | null                |\n| no-validator-state        | Boolean         | no       | false               |\n| no-flags                  | Boolean         | no       | false               |\n| disabled                  | Boolean         | no       | false               |\n| dark                      | Boolean         | no       | false               |\n| dark-color                | String (hex)    | no       | #424242             |\n| required                  | Boolean         | no       | false               |\n| error                     | Boolean         | no       | false               |\n| clearable                 | Boolean         | no       | false               |\n| loader (3)                | Boolean         | no       | false               |\n| translations (4)          | Object          | no       | null                |\n| countries-height (5)      | Number          | no       | 30                  |\n| no-use-browser-locale (6) | Boolean         | no       | false               |\n| fetch-country (7)         | Boolean         | no       | false               |\n| no-country-selector (8)   | Boolean         | no       | false               |\n| border-radius             | Number          | no       | 4                   |\n| show-code-on-list         | Boolean         | no       | false               |\n| no-example                | Boolean         | no       | false               |\n\n(1) Ex : `default-country-code=\"FR\"`\n\n(2) Ex : `preferred-countries=\"['FR', 'BE', 'DE']\"` This countries will be at the top of the list\n\n(3) Loader progress bar has the input color (`color` props)\n\n(4) translations comes to replace default texts - Ex :\n\n```html\ntranslations=\"{\n  countrySelectorLabel: 'Code pays',\n  countrySelectorError: 'Choisir un pays',\n  phoneNumberLabel: 'Numéro de téléphone',\n  example: 'Exemple :'\n}\"\n```\n\n(5) height in px of the rows included in the dropdown. Ex:\ncountries-height: 40\n\n(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`)\n\n(7) Fetch country code via [https://ip2c.org/s](https://ip2c.org/s) - Network needed - (Do not use it with `default-country-code` options)\n\n(8) The country selector is not shown, you can validate your phone number with the country code set\n\n## Events API\n\n| Event                | Return                                                                                                                                                                            |\n|----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| phone-number-focused | `-` (emit when phone number input is focused)                                                                                                                                     |\n| phone-number-blur    | `-` (emit when phone number input is blur)                                                                                                                                        |\n| input                | [AsYouType value](https://github.com/catamphetamine/libphonenumber-js#as-you-type-formatter) (emit when new value is enter on phone number input \u0026\u0026 when a country is choosed)    |\n| update               | All values (cf values in table on [demo](https://louismazel.github.io/vue-phone-number-input/)) (emit when new value is enter on phone number input \u0026\u0026 when a country is choosed) |\n\n## Keyboard accessibility\n\n| Props                  | Action                                                    |\n|------------------------|-----------------------------------------------------------|\n| ArrowDown              | Navigation down in countries list                         |\n| ArrowUp                | Navigation up in countries list                           |\n| Escape                 | Close countries list                                      |\n| All letters characters | Searching country name in countries list (should be open) |\n\n## Named slots\n\n| Slot  | Action                                                                  |\n|-------|-------------------------------------------------------------------------|\n| arrow | Override the default arrow character for toggling the list of countries |\n\n## Contribution\n\n### Project setup\n\n```bash\nnpm install\n```\n\n### Compiles and hot-reloads for development\n\n```bash\nnpm run serve\n```\n\n### Lints and fixes files\n\n```bash\nnpm run lint\n```\n\n## License\n\nThis project is licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flouismazel%2Fvue-phone-number-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flouismazel%2Fvue-phone-number-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flouismazel%2Fvue-phone-number-input/lists"}