International Phone Input Field With Country Flags - VPhoneInput

Install & Download:

# Yarn
$ yarn add v-phone-input flag-icons
# NPM
$ npm i v-phone-input flag-icons

Description:

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.

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

<!-- Component -->
<script setup>
import { ref } from 'vue';
const phone = ref('');
</script>
<template>
<v-phone-input v-model="phone" />
</template>

2. 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: () => [],
},
validateOn: {
  type: String as PropType<ValidateOnValue | `${ValidateOnValue} lazy` | `lazy ${ValidateOnValue}` | 'lazy'>,
  default: undefined,
},
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: () => ({}),
},

3. Events.

@update:modelValue
@update:country

Preview:

International Phone Input Field With Country Flags - VPhoneInput

Changelog:

v4.1.2 (02/05/2024)

bugfixes

v4.1.1 (01/19/2024)

bugfixes

v4.1.0 (01/09/2024)

feat: order preferred countries using passed preferCountries prop
feat: add an example property to customize shown example

v4.0.1 (01/08/2024)

Fix: show preferred countries first in country selection list

v4.0.0 (12/12/2023)

Phone number object and helpers have changed to use awesome-phonenumber V6 objects.
If you are only using string phone values without any helper functions (makePhone, makeExample or formatPhone), no change should be required by this new version.

v3.0.6 (11/20/2023)