VPhoneInput is a user-friendly international telephone (E.164) input field component for Vuetify and Vue JS.
How to use it:
1. Import the VPhoneInput component and country flags.
import Vue from 'vue'; import VPhoneInputPlugin from 'v-phone-input'; import 'flag-icons/css/flag-icons.min.css';
Vue.use(VPhoneInputPlugin, { // options });
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'), }, persistentPlaceholder: { type: Boolean, default: () => getOption('persistentPlaceholder'), }, persistentHint: { type: Boolean, default: () => getOption('persistentHint'), }, appendIcon: { type: String, default: undefined, }, appendOuterIcon: { type: String, default: undefined, }, prependInnerIcon: { type: String, default: undefined, }, prependIcon: { type: String, default: undefined, }, clearIcon: { type: String, default: undefined, }, outlined: { type: Boolean, default: undefined, }, filled: { type: Boolean, default: undefined, }, shaped: { type: Boolean, default: undefined, }, flat: { type: Boolean, default: undefined, }, solo: { type: Boolean, default: undefined, }, soloInverted: { type: Boolean, default: undefined, }, backgroundColor: { type: String, default: undefined, }, color: { type: String, default: undefined, }, light: { type: Boolean, default: undefined, }, dark: { type: Boolean, default: undefined, }, rounded: { type: Boolean, default: undefined, }, dense: { type: Boolean, default: undefined, }, height: { type: [String, Number], default: undefined, }, loaderHeight: { type: [String, Number], default: undefined, }, reverse: { type: Boolean, default: false, }, singleLine: { type: Boolean, default: undefined, }, clearable: { type: Boolean, default: undefined, }, autofocus: { type: Boolean, default: undefined, }, error: { type: Boolean, default: undefined, }, errorCount: { type: [Number, String], default: undefined, }, errorMessages: { type: [Array, String], default: undefined, }, messages: { type: [Array, String], default: undefined, }, success: { type: Boolean, default: undefined, }, successMessages: { type: [Array, String], default: undefined, }, validateOnBlur: { type: Boolean, default: undefined, }, readonly: { type: Boolean, default: undefined, }, disabled: { type: Boolean, default: undefined, }, loading: { type: Boolean, default: false, }, rules: { type: Array as PropType<VPhoneInputRules>, default: () => [], }, countryIconMode: { type: [String, Object] as PropType<CountryIconMode>, default: () => getOption('countryIconMode'), }, allCountries: { type: Array as PropType<Country[]>, default: () => getOption('allCountries'), }, preferredCountries: { type: Array as PropType<CountryIso2[]>, default: () => getOption('preferredCountries'), }, onlyCountries: { type: Array as PropType<CountryIso2[]>, default: () => getOption('onlyCountries'), }, ignoredCountries: { type: Array as PropType<CountryIso2[]>, default: () => getOption('ignoredCountries'), }, defaultCountry: { type: String as PropType<CountryIso2 | undefined>, default: () => getOption('defaultCountry'), }, countryGuesser: { type: Object as PropType<CountryGuesser>, default: () => getOption('countryGuesser'), }, disableGuessingCountry: { type: Boolean, default: () => getOption('disableGuessingCountry'), }, 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: '', }, value: { type: String, default: '', }, countryProps: { type: Object, default: () => ({}), }, phoneProps: { type: Object, default: () => ({}), },
Preview:
Changelog:
v2.0.0 (07/27/2022)
- fix: components treeshaking support
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