{"id":42589554,"url":"https://github.com/paul-thebaud/v-phone-input","last_synced_at":"2026-01-28T23:09:38.284Z","repository":{"id":39796017,"uuid":"463471086","full_name":"paul-thebaud/v-phone-input","owner":"paul-thebaud","description":"International and accessible phone input for Vuetify 3 and Vue 3.","archived":false,"fork":false,"pushed_at":"2025-12-01T00:12:44.000Z","size":29474,"stargazers_count":79,"open_issues_count":3,"forks_count":9,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-12-03T07:16:23.905Z","etag":null,"topics":["a11y","field","input","phone","vue","vuetify"],"latest_commit_sha":null,"homepage":"https://paul-thebaud.github.io/v-phone-input/","language":"TypeScript","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/paul-thebaud.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-02-25T09:22:23.000Z","updated_at":"2025-11-26T20:23:16.000Z","dependencies_parsed_at":"2026-01-28T22:10:04.140Z","dependency_job_id":null,"html_url":"https://github.com/paul-thebaud/v-phone-input","commit_stats":{"total_commits":204,"total_committers":1,"mean_commits":204.0,"dds":0.0,"last_synced_commit":"9ecdba0cb2b7461c8f01df4befa125d0aa136909"},"previous_names":[],"tags_count":75,"template":false,"template_full_name":null,"purl":"pkg:github/paul-thebaud/v-phone-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paul-thebaud%2Fv-phone-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paul-thebaud%2Fv-phone-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paul-thebaud%2Fv-phone-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paul-thebaud%2Fv-phone-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paul-thebaud","download_url":"https://codeload.github.com/paul-thebaud/v-phone-input/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paul-thebaud%2Fv-phone-input/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28854546,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T22:56:21.783Z","status":"ssl_error","status_checked_at":"2026-01-28T22:56:00.861Z","response_time":57,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["a11y","field","input","phone","vue","vuetify"],"created_at":"2026-01-28T23:09:37.715Z","updated_at":"2026-01-28T23:09:38.276Z","avatar_url":"https://github.com/paul-thebaud.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VPhoneInput\n\n[![Tests](https://github.com/paul-thebaud/v-phone-input/actions/workflows/tests.yml/badge.svg)](https://github.com/paul-thebaud/v-phone-input/actions/workflows/tests.yml)\n[![Publish](https://github.com/paul-thebaud/v-phone-input/actions/workflows/publish.yml/badge.svg)](https://github.com/paul-thebaud/v-phone-input/actions/workflows/publish.yml)\n[![codecov](https://codecov.io/gh/paul-thebaud/v-phone-input/branch/main/graph/badge.svg?token=75BHV1FRQ9)](https://codecov.io/gh/paul-thebaud/v-phone-input)\n[![NPM version](https://img.shields.io/npm/v/v-phone-input)](https://www.npmjs.com/package/v-phone-input)\n![NPM downloads](https://img.shields.io/npm/dt/v-phone-input)\n![MIT license](https://img.shields.io/npm/l/v-phone-input)\n\nInternational phone field for [Vuetify 3](http://vuetifyjs.com) and [Vue 3](https://vuejs.org/).\n\n- Simple and standardized value using E164 formatted phone numbers (example: +33123456789)\n- [Searchable countries](#enabling-searching-countries)\n- [Automatic validation](#validation)\n- [Customizable display format](#customizing-display-format)\n- [Easy localization with label functions](#localization)\n- [Customizable countries icons](#country-icon-modes)\n- [Relies on external packages](#dependencies) to provide countries data and icons\n- Built-in types definitions with Typescript\n- Fully unit/end-to-end tested\n\n**Coming from 2.x.x and upgrading to Vuetify 3?**\nCheckout [the migration guide](MIGRATION.md).\n\n**Wish to use this package with Vuetify 2?**\n[Old version 2.x.x](https://github.com/paul-thebaud/v-phone-input/tree/2.x.x)\nis compatible with Vuetify 2 and Vue 2.\n\nProudly supported by the [CoWork'HIT](https://coworkhit.com).\n\n**Motivation:** There are already multiple libraries to provide phone number input on Vuetify. But\nfor those already published are not actively maintained or does not put focus on providing great\naccessibility. This new library aims to provide those two.\n\n## Demo\n\nYou can try VPhoneInput with many options and plugin registration code generation on\nthe [GitHub pages demo](https://paul-thebaud.github.io/v-phone-input/).\n\nYou can also use\nthe [Stackblitz playground](https://stackblitz.com/edit/v-phone-input?file=src%2FApp.vue\u0026terminal=dev)\nto try the package or prepare bug reproductions.\n\n## TL;DR\n\nInstallation though Yarn:\n\n```shell\nyarn add v-phone-input flag-icons\n```\n\nInstallation though NPM:\n\n```shell\nnpm install v-phone-input flag-icons\n```\n\nPlugin installation:\n\n```javascript\nimport 'flag-icons/css/flag-icons.min.css';\nimport 'v-phone-input/dist/v-phone-input.css';\nimport { createVPhoneInput } from 'v-phone-input';\n\nconst vPhoneInput = createVPhoneInput({\n  countryIconMode: 'svg',\n});\n\napp.use(vPhoneInput);\n```\n\n\u003e If you are using Nuxt, check out the [Nuxt setup guide](#nuxt-setup).\n\nComponent usage:\n\n```vue\n\n\u003cscript setup\u003e\n  import { ref } from 'vue';\n\n  const phone = ref('');\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cv-phone-input v-model=\"phone\" /\u003e\n\u003c/template\u003e\n```\n\n## Documentation\n\n### Table of contents\n\n- [Requirements](#requirements)\n- [Installation](#installation)\n- [Migration](#migration)\n- [Usage](#usage)\n- [Nuxt setup](#nuxt-setup)\n- [Props](#props)\n- [Events](#events)\n- [Slots](#slots)\n- [Exposed](#exposed)\n- [Examples](#examples)\n    - [Country icon modes](#country-icon-modes)\n    - [Validation](#validation)\n    - [Enabling searching countries](#enabling-searching-countries)\n    - [Customizing display format](#customizing-display-format)\n    - [Localization](#localization)\n- [Dependencies](#dependencies)\n- [Types](#types)\n    - [Country](#country)\n    - [Country guesser](#country-guesser)\n    - [Phone number formats](#phone-number-formats)\n    - [Phone number](#phone-number)\n    - [Message options](#message-options)\n    - [Message](#message)\n    - [Message resolver](#message-resolver)\n\n### Requirements\n\nVPhoneInput requires `Vue@3` and `Vuetify@3` to be installed and working in your project.\n\n\u003e VPhoneInput utilizes recent ES features that may require polyfills for older browser like\n\u003e Internet Explorer.\n\n\u003e [Available country guessers](#country-guesser) requires fetch.\n\n### Installation\n\nYou can install this package though Yarn:\n\n```shell\nyarn add v-phone-input flag-icons\n```\n\nOr NPM:\n\n```shell\nnpm install v-phone-input flag-icons\n```\n\n\u003e `flag-icons` package is required if you want the input to display countries' flags.\n\n### Usage\n\nYou can globally define the input using the provided plugin factory. This will register\nthe `v-phone-input` component globally. You must also import the package additional CSS.\n\n```javascript\nimport 'flag-icons/css/flag-icons.min.css';\nimport 'v-phone-input/dist/v-phone-input.css';\nimport { createVPhoneInput } from 'v-phone-input';\nimport { createApp } from 'vue';\n\nconst app = createApp(App);\n\nconst vPhoneInput = createVPhoneInput({\n  countryIconMode: 'svg',\n});\n\napp.use(vPhoneInput);\n```\n\nYou may also only define the field on a per-file basis. Notice that with this method, you won't be\nable to define props' default values for the input.\n\n```vue\n\n\u003cscript setup\u003e\n  import 'flag-icons/css/flag-icons.min.css';\n  import 'v-phone-input/dist/v-phone-input.css';\n  import { VPhoneInput } from 'v-phone-input';\n  import { ref } from 'vue';\n\n  const phone = ref('');\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cv-phone-input\n      v-model=\"phone\"\n      country-icon-mode=\"svg\"\n  /\u003e\n\u003c/template\u003e\n```\n\n### Migration\n\nPlease follow the [migration guide](MIGRATION.md) if you need to migrate from version 1, 2 or 3.\n\n### Nuxt setup\n\nIf you are using Nuxt, you must mark `v-phone-input` as a transpiled package in\nyour Nuxt configuration:\n\n```typescript\nexport default defineNuxtConfig({\n  build: {\n    transpile: [\n      // Keep other transpile configuration, such as:\n      'vuetify',\n      // Add transpile for the package:\n      'v-phone-input',\n    ],\n  },\n});\n```\n\nInstead of defining a Vue plugin, you must define a Nuxt plugin as follows:\n\n```typescript\nimport 'flag-icons/css/flag-icons.min.css';\nimport 'v-phone-input/dist/v-phone-input.css';\nimport { createVPhoneInput } from 'v-phone-input';\n\nexport default defineNuxtPlugin((nuxtApp) =\u003e {\n  const vPhoneInput = createVPhoneInput({\n    countryIconMode: 'svg',\n  });\n\n  nuxtApp.vueApp.use(vPhoneInput);\n});\n```\n\n### Props\n\nVPhoneInput provides many props to customize the input behaviors or display.\n\nYou may pass those props directly the input:\n\n```vue\n\n\u003ctemplate\u003e\n  \u003cv-phone-input label=\"Your Phone number\" /\u003e\n\u003c/template\u003e\n```\n\nOr define them as default values when creating the plugin:\n\n```javascript\nimport 'v-phone-input/dist/v-phone-input.css';\nimport { createVPhoneInput } from 'v-phone-input';\nimport { createApp } from 'vue';\n\nconst app = createApp(App);\n\nconst vPhoneInput = createVPhoneInput({\n  label: 'Your phone number',\n});\n\napp.use(vPhoneInput);\n```\n\n| Name                     | Type                                                               | Default                                                               | Description                                                                                                                                       |\n|--------------------------|--------------------------------------------------------------------|-----------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------|\n| `label`                  | [`MessageResolver`](#message-resolver)                             | Phone                                                                 | The phone input label (see [Localization](#localization)).                                                                                        |\n| `ariaLabel`              | [`MessageResolver`](#message-resolver)                             | `undefined`                                                           | The phone input `aria-label` (see [Localization](#localization)).                                                                                 |\n| `countryLabel`           | [`MessageResolver`](#message-resolver)                             | Country                                                               | The country input label (see [Localization](#localization)).                                                                                      |\n| `countryAriaLabel`       | [`MessageResolver`](#message-resolver)                             | Country for {label}                                                   | The phone input `aria-label` (see [Localization](#localization)).                                                                                 |\n| `placeholder`            | [`MessageResolver`](#message-resolver)                             | `undefined`                                                           | The phone input placeholder (see [Localization](#localization)).                                                                                  |\n| `hint`                   | [`MessageResolver`](#message-resolver)                             | `undefined`                                                           | The phone input hint (see [Localization](#localization)).                                                                                         |\n| `invalidMessage`         | [`MessageResolver`](#message-resolver) or `null`                   | The \"{label}\" field is not a valid phone number (example: {example}). | The phone input message when number is invalid (see [Localization](#localization)). You can pass `null` to disable default validation.            |\n| `example`                | `string` or `Function` or `undefined`                              | `undefined`                                                           | Example of a valid phone number (or factory function which takes a [`Country[]`](#country) object) to customize phone number example for message. |\n| `countryIconMode`        | `string` or `VueConstructor` or `undefined`                        | `undefined`                                                           | The country icon display mode (see [Country icon modes](#country-icon-modes)).                                                                    |\n| `allCountries`           | [`Country[]`](#country)                                            | An array of all possible countries                                    | Array of countries to use.                                                                                                                        |\n| `preferCountries`        | [`CountryOrIso2[]`](#country)                                      | `[]`                                                                  | Array of countries' codes to propose as first option of country input.                                                                            |\n| `includeCountries`       | [`CountryOrIso2[]`](#country)                                      | `[]`                                                                  | Array of countries' codes to include as options of country input.                                                                                 |\n| `excludeCountries`       | [`CountryOrIso2[]`](#country)                                      | `[]`                                                                  | Array of countries' codes to exclude from options of country input.                                                                               |\n| `defaultCountry`         | [`CountryOrIso2`](#country)                                        | `undefined`                                                           | Default country to select when not guessing nor detecting from current value.                                                                     |\n| `countryGuesser`         | [`CountryGuesser` or `PreferableCountryGuesser`](#country-guesser) | `new MemoIp2cCountryGuesser()`                                        | Country guesser implementation to use when guessing country (see [Country guesser](#country-guesser)).                                            |\n| `guessCountry`           | `boolean`                                                          | `false`                                                               | Enable guessing country using default or provided country guesser.                                                                                |\n| `disableGuessLoading`    | `boolean`                                                          | `false`                                                               | Disable passing the country input in a loading state when guessing country.                                                                       |\n| `enableSearchingCountry` | `boolean`                                                          | `false`                                                               | Turns the country input into a `VAutocomplete` input (see [Enabling searching countries example](#enabling-searching-countries)).                 |\n| `rules`                  | `Function[]` or `string[]`                                         | `[]`                                                                  | Additional rules to pass to phone input (see [Validation example](#validation)).                                                                  |\n| `displayFormat`          | `PhoneNumberFormat`                                                | `'national'`                                                          | Format to use when displaying valid phone numbers in phone text input (see [Phone number formats](#phone-number-formats)).                        |\n| `country`                | `string`                                                           | `''`                                                                  | Country of the country input. Can be used with `.sync` modifier. Will be superseded by value's country if defined on mounting.                    |\n| `value`                  | `string`                                                           | `''`                                                                  | Value of the phone input. You may use it using `v-model` or `@input`.                                                                             |\n| `wrapperProps`           | `object`                                                           | `{}`                                                                  | Props to pass to the inputs wrapper `div` element.                                                                                                |\n| `countryProps`           | `object`                                                           | `{}`                                                                  | Props to pass to the `VSelect` or `VAutocomplete` country input component.                                                                        |\n| `phoneProps`             | `object`                                                           | `{}`                                                                  | Props to pass to the `VTextField` phone input component.                                                                                          |\n| `phoneValidator`         | `(phone: ParsedPhoneNumber) =\u003e boolean`                            | `(phone) =\u003e phone.valid`                                              | Callback to check the phone validity (see [Custom phone number validator](#custom-phone-number-validator)).                                       |\n\n#### Props inheritance\n\nYou can also pass the [Vuetify `VTextField`](https://vuetifyjs.com/en/api/v-text-field/#props)\nand [Vuetify `VSelect`](https://vuetifyjs.com/en/api/v-select/#props)\nprops to the component to customize variant, icons, errors, etc. using the `v-bind` directive or\nthe `countryProps` and `phoneProps` props.\n\nMost props will only apply to the phone input component (not wrapper `div` or country select),\nbut be aware that:\n\n- Some props will only apply to the inputs wrapper `div` element: `id`, `class` and `style`.\n- Some props are applied to both inputs: `variant`, `flat`, `tile`, `density`, `singleLine`,\n  `hideDetails`, `direction`, `reverse`, `color`, `bgColor`, `theme`, `disabled`, `readonly`, and\n  `rounded`.\n\n### Events\n\n| Name                | Type     | Description                                                                                                                                        |\n|---------------------|----------|----------------------------------------------------------------------------------------------------------------------------------------------------|\n| `update:modelValue` | `string` | Emitted when the country or phone is updated with the E164 formatted phone number. If the input is not valid, the raw input value will be emitted. |\n| `update:country`    | `string` | Emitted when the country is updated with the selected country.                                                                                     |\n\n\u003e You can also bind to the [Vuetify `VTextField`](https://vuetifyjs.com/en/api/v-text-field/#props)\n\u003e and [Vuetify `VSelect`](https://vuetifyjs.com/en/api/v-select/#props) events\n\u003e using the `v-bind` directive or the `countryProps` and `phoneProps` props.\n\n### Slots\n\nEach slots with a `country:` prefix are passed to the country input, other slots are passed to the\nphone input.\n\n```vue\n\n\u003ctemplate\u003e\n  \u003cv-phone-input\u003e\n    \u003ctemplate #country:label\u003e\n      Label for country\n    \u003c/template\u003e\n    \u003ctemplate #label\u003e\n      Label for phone\n    \u003c/template\u003e\n  \u003c/v-phone-input\u003e\n\u003c/template\u003e\n```\n\nThe input also provides 5 special slots:\n\n- `country-selection` for countries' display in selection.\n- `country-icon` for countries' icons display in selection and select items.\n- `country-name` for countries' name display in select items.\n- `country-append` for countries' appended info display in select items.\n- `country-input` to override the country input.\n- `phone-input` to override the country input.\n\nAppart from `country-input` and `phone-input`, each of those slots will receive\na [`country`](#country) object property.\n`country-icon` slot will also receive a `decorative` boolean property,\nwhich will be `false` inside selection, and `true` inside select item.\n\n```vue\n\n\u003ctemplate\u003e\n  \u003cv-phone-input\u003e\n    \u003ctemplate #country-icon=\"{ country, decorative }\"\u003e\n      \u003cimg\n          :src=\"`path/to/flags/${country.iso2}.png`\"\n          :alt=\"decorative ? '' : country.name\"\n      \u003e\n    \u003c/template\u003e\n    \u003ctemplate #country-name=\"{ country }\"\u003e\n      {{ country.name }}\n    \u003c/template\u003e\n    \u003ctemplate #country-append=\"{ country }\"\u003e\n      \u003cstrong\u003e+{{ country.dialCode }}\u003c/strong\u003e\n    \u003c/template\u003e\n  \u003c/v-phone-input\u003e\n\u003c/template\u003e\n```\n\n### Exposed\n\n| Name              | Type                                   | Description                                                       |\n|-------------------|----------------------------------------|-------------------------------------------------------------------|\n| `countryInputRef` | `Ref\u003cVSelect\u003e` or `Ref\u003cVAutocomplete\u003e` | Reference to the country input.                                   |\n| `phoneInputRef`   | `Ref\u003cVTextField\u003e`                      | Reference to the phone input.                                     |\n| `errorMessages`   | `string[]`                             | An array of error messages that were set by the setErrors method. |\n| `isValid`         | `boolean`                              | Boolean indicating if the input is valid.                         |\n| `reset`           | `() =\u003e Promise\u003cvoid\u003e`                  | Resets the phone input value.                                     |\n| `resetValidation` | `() =\u003e Promise\u003cvoid\u003e`                  | Resets validation of the phone input without modifying its value. |\n| `validate`        | `(silent: boolean) =\u003e Promise\u003cvoid\u003e`   | Validates the phone input’s value.                                |\n\n### Examples\n\n#### Country icon modes\n\nWith VPhoneInput, you can choose between 5 country icon modes which are changing the way the country\ninput will display.\n\n##### SVG\n\nThis is the proposed way to use the input. Rely on an SVG flag icons package. You must\ninstall [`flag-icons`](https://www.npmjs.com/package/flag-icons) package to use it.\n\n```javascript\nimport 'flag-icons/css/flag-icons.min.css';\n\nconst vPhoneInput = createVPhoneInput({\n  countryIconMode: 'svg',\n});\n```\n\n##### Sprite\n\nRely on a CSS sprite flag icons package. You must\ninstall [`world-flags-sprite`](https://www.npmjs.com/package/world-flags-sprite) package to use it.\n\n```javascript\nimport 'world-flags-sprite/stylesheets/flags32.css';\n\nconst vPhoneInput = createVPhoneInput({\n  countryIconMode: 'sprite',\n});\n```\n\n##### Custom component\n\nThis allows you to register a custom component to display country icons. Component will\nreceive `country` and `decorative` props. We provide a simple `VPhoneCountrySpan` component to\nsimplify using a CSS class image based icon system (such as another CSS sprite file).\n\n```javascript\nimport { defineComponent, h } from 'vue';\n\nconst vPhoneInput = createVPhoneInput({\n  countryIconMode: defineComponent({\n    setup(props) {\n      return () =\u003e h('span', {}, [props.country.name]);\n    },\n  }),\n});\n```\n\n##### Custom slot\n\nSee the [slots section](#slots).\n\n##### No icon\n\nThis is the default behavior when not overriding options or props default values. This will not\ndisplay an icon inside the list, but will show the ISO-2 code inside the selection slot of country\ninput.\n\n#### Validation\n\nBy default, the input will validate that the phone number is a valid one by\ninjecting a rule to the phone text input.\n\nYou may add any additional rules by providing a `rules` prop to the input:\n\n```vue\n\n\u003cscript setup\u003e\n  const rules = [\n    (value, phone, { label, country, example }) =\u003e !!value || `The \"${label}\" field is required.`,\n  ];\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cv-phone-input :rules=\"rules\" /\u003e\n\u003c/template\u003e\n```\n\nAny rule you pass as a function will receive 3 arguments (instead of one for default Vuetify rules)\nthat you may use when validating user's input:\n\n- `value`: the value contained in the phone text input.\n- `phone`:\n  the [parsed phone number object created by awesome-phonenumber](https://github.com/grantila/awesome-phonenumber#basic-usage).\n- `messageOptions`: the [message options](#message-options) which you may use to inject the input\n  label, current country or a phone example inside the message.\n\n##### Disabling default validation\n\nIf you don't want the automatic validation to run, you can pass a `null` value to the\n`invalid-message` prop:\n\n```vue\n\n\u003ctemplate\u003e\n  \u003cv-phone-input :invalid-message=\"null\" /\u003e\n\u003c/template\u003e\n```\n\n##### Custom phone number validator\n\nBy default, VPhoneInput will only consider \"classic\" phone numbers to be valid.\n\nIf you want to customize this behavior, for example to allow emergency short\nnumbers too, you can configure a `phoneValidator` callback. In the following\nexample, both classic and short numbers are considered valid. The phone\nvalue given to the callback is\n[a parsed phone number object created by awesome-phonenumber](https://github.com/grantila/awesome-phonenumber#basic-usage).\n\n```vue\n\u003ctemplate\u003e\n  \u003cv-phone-input\n      :phone-validator=\"(phone) =\u003e phone.valid || phone.shortValid\"\n  /\u003e\n\u003c/template\u003e\n```\n\n#### Enabling searching countries\n\nYou may provide a `enableSearchingCountry` with a `true` value to enable textual search in\ncountries.\n\n\u003e Since VPhoneInput does not import VAutocomplete to reduce its weight, you might need to provide\n\u003e this component to Vue when treeshaking Vuetify components\n\u003e (e.g. when using `vite-plugin-vuetify`).\n\n##### When using plugin registration\n\nTo enable searching countries for all inputs as a default behavior, you must\nregister the `VAutocomplete` component globally inside your plugin definition.\n\n```javascript\nimport 'flag-icons/css/flag-icons.min.css';\nimport 'v-phone-input/dist/v-phone-input.css';\nimport { createVPhoneInput } from 'v-phone-input';\nimport { VAutocomplete } from 'vuetify/components';\n\n// ...your Vue app creation.\n\n// IMPORTANT: required when treeshaking Vuetify components.\napp.component('VAutocomplete', VAutocomplete);\n\nconst vPhoneInput = createVPhoneInput({\n  enableSearchingCountry: true,\n});\n\napp.use(vPhoneInput);\n```\n\nAfter this setup, all `v-phone-input` will be using an autocomplete input\nfor country by default.\n\n##### When using per-file registration\n\nTo enable searching countries on a per-file basis, you must register the\n`VAutocomplete` component inside your app definition.\n\n```javascript\nimport { VAutocomplete } from 'vuetify/components';\n\n// ...your Vue app creation.\n\n// IMPORTANT: required when treeshaking Vuetify components.\napp.component('VAutocomplete', VAutocomplete);\n```\n\nAfter this setup, you can safely enable the `enable-searching-country` property.\n\n```vue\n\n\u003cscript setup\u003e\n  import 'flag-icons/css/flag-icons.min.css';\n  import 'v-phone-input/dist/v-phone-input.css';\n  import { VPhoneInput } from 'v-phone-input';\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cv-phone-input enable-searching-country /\u003e\n\u003c/template\u003e\n```\n\n#### Customizing display format\n\nBy default, valid phone number will be formatted using the national format. You can customize the\ndisplay format using the `displayFormat` prop/option:\n\n```javascript\nconst vPhoneInput = createVPhoneInput({\n  displayFormat: 'international',\n});\n```\n\n#### Localization\n\nLocalizable props may be defined on a per-input basis:\n\n```vue\n\n\u003ctemplate\u003e\n  \u003cv-phone-input\n      label=\"Phone number\"\n      country-label=\"Country\"\n      country-aria-label=\"Country for phone number\"\n      invalid-message=\"Phone number must be a valid phone number (example: 01 23 45 67 89).\"\n  /\u003e\n\u003c/template\u003e\n```\n\nLocalizable props can also be defined for all inputs as a default behavior:\n\n```javascript\n// Example without any localization library.\nconst vPhoneInput = createVPhoneInput({\n  label: 'Phone number',\n  countryLabel: 'Country',\n  countryAriaLabel: ({ label }) =\u003e `Country for ${label}`,\n  invalidMessage: ({ label, example }) =\u003e\n    `${label} must be a valid phone number (example: ${example}).`,\n});\n\n// Example with Vue-I18N localization library.\nimport i18n from './path/to/i18n-plugin';\n\nconst vPhoneInput = createVPhoneInput({\n  label: i18n.global.t('phone.phoneLabel'),\n  countryLabel: i18n.global.t('phone.phoneCountry'),\n  countryAriaLabel: (options) =\u003e i18n.global.t('phone.phoneCountryFor', options),\n  invalidMessage: (options) =\u003e i18n.global.t('phone.invalidPhoneGiven', options),\n});\n```\n\n\u003e Any localizable prop is a [message resolver](#message-resolver). Notice that for `label`\n\u003e and `ariaLabel` props, no label will be defined for the message resolver's options.\n\n\u003e To disable a message, you should pass `null` (instead of `undefined`). This way, you'll be able\n\u003e to disable the country label for example (be sure to provide an explicit `countryAriaLabel`\n\u003e when doing so).\n\n### Dependencies\n\nVPhoneInput relies on multiple dependencies to work:\n\n- [`awesome-phonenumber`](https://www.npmjs.com/package/awesome-phonenumber) for phone number\n  formats, validation, etc.\n- [`countries-list`](https://www.npmjs.com/package/countries-list) for phone number\n  countries' names.\n- [`flag-icons`](https://www.npmjs.com/package/flag-icons) when using the `svg` country icon mode\n  for SVG country flags.\n- [`world-flags-sprite`](https://www.npmjs.com/package/world-flags-sprite) when using the `sprite`\n  country icon mode for CSS sprite country flags.\n\n### Types\n\n#### Country\n\nA country object contains information about a country.\n\n```typescript\ninterface Country {\n  name: string;       // Example: \"France\".\n  iso2: string;  // Example: \"FR\".\n  dialCode: string;   // Example: \"33\".\n}\n\nexport type CountryOrIso2 = Country | string;\n```\n\n#### Country Guesser\n\nA country guesser is a class implementing `CountryGuesser` interface and providing a `guess` method\nto detect the default country to use.\n\n```typescript\ninterface CountryGuesser {\n  guess: () =\u003e Promise\u003cstring | undefined\u003e;\n}\n```\n\nThis package ships with two `CountryGuesser` implementations:\n\n- `Ip2cCountryGuesser` which uses [IP2C service](https://ip2c.org) to guess the country from the\n  client's IP. Notice that IP2C service might not work when using an add blocking extension.\n- `MemoIp2cCountryGuesser` (default) which memoize the result of `Ip2cCountryGuesser` promise into a\n  class property.\n- `StorageMemoIp2cCountryGuesser` which memoize the result of `Ip2cCountryGuesser` promise into a\n  storage implementation (defaults to `localStorage`).\n\nA preferable country guesser is a country guesser with the capability to use the user preference\ninstead of the guessed country on future calls.\n\n```typescript\ninterface PreferableCountryGuesser extends CountryGuesser {\n  setPreference: (country: string) =\u003e void;\n}\n```\n\n`MemoIp2cCountryGuesser` and `StorageMemoIp2cCountryGuesser` are implementations of\nthe `PreferableCountryGuesser` interface. They store the country (when changed using the input) to\nreturn it instead of the guessed country on future `guess` call.\n\n#### Phone Number Formats\n\nA phone number format is a string representing a format, allowing to change the display format of a\nphone number in input. Here are the available format (provided\nby [awesome-phonenumber](https://www.npmjs.com/package/awesome-phonenumber)):\n\n- `e164`: `+46707123456`\n- `international`: `+46 70 712 34 56`\n- `national`: `070-712 34 56`\n- `rfc3966`: `tel:+46-70-712-34-56`\n- `significant`: `707123456`\n\n#### Message options\n\nAn object containing the input `label` (or `aria-label` if no label) and an example of a valid phone\nnumber for active country.\n\n```typescript\ntype MessageOptions = {\n  label?: Message;\n  country: Country;\n  example: string;\n}\n```\n\n#### Message\n\nA type representing a localized message for the input which will be used as the label, hint, etc.\n\n```typescript\nexport type Message = string | undefined;\n```\n\n#### Message resolver\n\nA type representing a function to resolve a message using current message options or directly the\nmessage.\n\n```typescript\nexport type MessageResolver = ((options: MessageOptions) =\u003e Message) | Message;\n```\n\n## Contributing\n\nPlease see [CONTRIBUTING file](CONTRIBUTING.md) for more details.\n\nInformal discussion regarding bugs, new features, and implementation of existing features takes\nplace in the\n[GitHub issue page of this repository](https://github.com/paul-thebaud/v-phone-input/issues).\n\n## Credits\n\n- [Paul Thébaud](https://github/paul-thebaud)\n- [CoWork'HIT](https://coworkhit.com)\n- [All Contributors](https://github.com/paul-thebaud/v-phone-input/graphs/contributors)\n\nInspired by [vue-tel-input](https://github.com/iamstevendao/vue-tel-input)\nand [vue-tel-input-vuetify](https://github.com/yogakurniawan/vue-tel-input-vuetify).\n\n## License\n\n`v-phone-input` is an open-sourced software licensed under the\n[MIT license](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaul-thebaud%2Fv-phone-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaul-thebaud%2Fv-phone-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaul-thebaud%2Fv-phone-input/lists"}