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