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.

// 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)

  • Bugfix

v3.0.5 (07/01/2023)

  • Bugfix

v3.0.4 (06/09/2023)

  • Bugfix

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

Add Comment