vuetify-phone-number

Phone number form input visually compatible with Vuetify projects. Allows users to enter in their phone number in their localized, native format while giving your app an [E164](https://en.wikipedia.org/wiki/E.164) formatted string.

Usage no npm install needed!

<script type="module">
  import vuetifyPhoneNumber from 'https://cdn.skypack.dev/vuetify-phone-number';
</script>

README

vuetify-phone-number

Phone number form input visually compatible with Vuetify projects. Allows users to enter in their phone number in their localized, native format while giving your app an E164 formatted string.

Installation

npm install vuetify-phone-number

Usage

<v-phone-number label="Phone Number" v-model="phoneNumber" />

Props

All v-text-field props

Name Type Default Description
default-country string 'US' ISO 3166 Country code to initialize the input with. If the input is created with a value, the country code of the E164 number given is always used.
included-countries string [] The complete list of ISO 3166 country codes to inlude as choices for locality. Ignored if value is an empty array. If the input is created with a value, the country code of the E164 number given is always used.
excluded-countries string [] ISO 3166 country codes to exclude as choices for locality. Ignored if value is an empty array. If the input is created with a value, the country code of the E164 number given is always used.
show-flag boolean true Display the flag emoji of the selected country.
show-country-code boolean false Display the ISO 3166 country code of the selected country.
mobile boolean false Only accept mobile number. Implies strict.
landline boolean false Only accept fixed landline number. Implies strict.
strict boolean false If false, validation only checks there are enough digits in the phone number for the selected country. If true, the value itself will be checked (IE, no US area code begins with a zero).

Events

All v-text-field events

Slots

Most v-text-field slots but not:

  • counter (it's not a number)
  • prepend-inner (occupied by the country-code selector)
  • progress (nonsensical for a phone number)