International Phone Input Field With Country Flags – VPhoneInput

VPhoneInput is a user-friendly international telephone (E.164) input field component for Vuetify 3 and Vue 3.

How to use it:

1. Import and register the VPhoneInput component and country flags.

import 'flag-icons/css/flag-icons.min.css';
import 'v-phone-input/dist/v-phone-input.css';
import { createVPhoneInput } from 'v-phone-input';
import { createApp } from 'vue';
const app = createApp(App);
const vPhoneInput = createVPhoneInput({
  countryIconMode: 'svg',
});
app.use(vPhoneInput);

2. Add the VPhoneInput component to the template.

<template>
  <v-phone-input v-model="phone" />
</template>

3. Available props for the VPhoneInput component.

label: {
  type: [String, Function] as PropType<MessageResolver>,
  default: () => getOption('label'),
},
ariaLabel: {
  type: [String, Function] as PropType<MessageResolver>,
  default: () => getOption('ariaLabel'),
},
countryLabel: {
  type: [String, Function] as PropType<MessageResolver>,
  default: () => getOption('countryLabel'),
},
countryAriaLabel: {
  type: [String, Function] as PropType<MessageResolver>,
  default: () => getOption('countryAriaLabel'),
},
placeholder: {
  type: [String, Function] as PropType<MessageResolver>,
  default: () => getOption('placeholder'),
},
hint: {
  type: [String, Function] as PropType<MessageResolver>,
  default: () => getOption('hint'),
},
invalidMessage: {
  type: [String, Function] as PropType<MessageResolver>,
  default: () => getOption('invalidMessage'),
},
appendIcon: {
  type: String,
  default: undefined,
},
appendInnerIcon: {
  type: String,
  default: undefined,
},
prependIcon: {
  type: String,
  default: undefined,
},
prependInnerIcon: {
  type: String,
  default: undefined,
},
rules: {
  type: Array as PropType<VPhoneInputValidationRule[]>,
  default: () => [],
},
countryIconMode: {
  type: [String, Object] as PropType<CountryIconMode>,
  default: () => getOption('countryIconMode'),
},
allCountries: {
  type: Array as PropType<Country[]>,
  default: () => getOption('allCountries'),
},
preferCountries: {
  type: Array as PropType<CountryOrIso2[]>,
  default: () => getOption('preferCountries'),
},
includeCountries: {
  type: Array as PropType<CountryOrIso2[]>,
  default: () => getOption('includeCountries'),
},
excludeCountries: {
  type: Array as PropType<CountryOrIso2[]>,
  default: () => getOption('excludeCountries'),
},
defaultCountry: {
  type: String as PropType<CountryOrIso2 | undefined>,
  default: () => getOption('defaultCountry'),
},
countryGuesser: {
  type: Object as PropType<CountryGuesser>,
  default: () => getOption('countryGuesser'),
},
guessCountry: {
  type: Boolean,
  default: () => getOption('guessCountry'),
},
disableGuessLoading: {
  type: Boolean,
  default: () => getOption('disableGuessLoading'),
},
enableSearchingCountry: {
  type: Boolean,
  default: () => getOption('enableSearchingCountry'),
},
displayFormat: {
  type: String as PropType<PhoneNumberFormat>,
  default: () => getOption('displayFormat'),
},
country: {
  type: String,
  default: '',
},
modelValue: {
  type: String as PropType<string | null>,
  default: '',
},
countryProps: {
  type: Object,
  default: () => ({}),
},
phoneProps: {
  type: Object,
  default: () => ({}),
},

Preview:

Changelog:

v3.0.3 (05/25/2023)

• Bugfix

v3.0.2 (03/31/2023)

• Vuetify 3 and Vue 3 required instead of Vuetify 2 and Vue 2.
• Some props and exported modules names and behavior changes.

Download Details:

Author: paul-thebaud

Live Demo: https://paul-thebaud.github.io/v-phone-input/

Download Link: https://github.com/paul-thebaud/v-phone-input/archive/refs/heads/main.zip

Official Website: https://github.com/paul-thebaud/v-phone-input

Install & Download:

# Yarn
$ yarn add v-phone-input flag-icons

# NPM
$ npm i v-phone-input flag-icons