Vuetify International Phone

A Vue 3 + Vuetify 3 phone input component with country selection, flags, and validation powered by libphonenumber-js.

Features

• ✅ Vuetify Native - Built with v-text-field and v-autocomplete
• ✅ Smart Validation - Uses libphonenumber-js for accurate phone validation
• ✅ Country Selection - 200+ countries with flag icons
• ✅ E.164 Format - Emits standardized phone numbers
• ✅ Vue 3 + TypeScript - Modern composition API with full type support
• ✅ Tree-shakable - Minimal bundle size impact
• ✅ Framework Agnostic - Works with Vue 3, Nuxt 3, Laravel + Inertia

Installation

npm install vuetify-international-phone libphonenumber-js
# or
yarn add vuetify-international-phone libphonenumber-js

Setup

1. Install Dependencies

npm install libphonenumber-js
# For flag icons (optional)
npm install flag-icons

2. Import CSS

/* In your main CSS file */
@import 'flag-icons/css/flag-icons.min.css';
/* Or use our included styles */
@import 'vuetify-international-phone/styles';

3. Register Component

// main.ts
import { createApp } from 'vue'
import VPhoneInput from 'vuetify-international-phone'
import 'vuetify-international-phone/styles'

const app = createApp(App)
app.use(VPhoneInput)

Or locally:

import { VPhoneInput } from 'vuetify-international-phone'

export default {
  components: { VPhoneInput }
}

Basic Usage

<template>
  <v-form>
    <v-phone-input
      v-model="phone"
      label="Phone Number"
      required
    />
  </v-form>
</template>

<script setup>
import { ref } from 'vue'

const phone = ref('')
</script>

Advanced Usage

With Preferred Countries

<v-phone-input
  v-model="phone"
  :preferred-countries="['us', 'gb', 'ca', 'au']"
  label="Phone Number"
/>

Default Country

<v-phone-input
  v-model="phone"
  default-country="bd"
  label="Bangladesh Phone"
/>

Validation

<v-phone-input
  v-model="phone"
  label="Phone"
  required
  @validate="onValidate"
  validate-on-change
/>

Disable Country Selection

<v-phone-input
  v-model="phone"
  label="India Phone"
  default-country="in"
  :disable-country-select="true"
/>

Show Example Numbers

<v-phone-input
  v-model="phone"
  label="Phone"
  show-example
/>

Show Country Name

<!-- Show full country name (e.g., 🇧🇩 Bangladesh +880) -->
<v-phone-input
  v-model="phone"
  label="Phone"
  show-country-name
/>

<!-- Show short country code (e.g., 🇧🇩 BD +880) -->
<v-phone-input
  v-model="phone"
  label="Phone"
  show-country-name
  country-display-format="short"
/>

Event Handling

<v-phone-input
  v-model="phone"
  label="Phone"
  @change="onChange"
  @update:country="onCountryChange"
  @validate="onValidate"
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | modelValue | string | '' | Phone number in E.164 format | | label | string | 'Phone number' | Input label | | placeholder | string | '' | Input placeholder | | required | boolean | false | Field is required | | disabled | boolean | false | Disable component | | loading | boolean | false | Show loading state | | disableCountrySelect | boolean | false | Disable country selection | | preferredCountries | string[] | [] | Countries to show first (ISO2 codes) | | showExample | boolean | false | Show example number helper | | defaultCountry | string | '' | Default country (ISO2 code) | | inputType | 'tel' \| 'text' | 'tel' | Input type | | returnAs | 'e164' \| 'national' \| 'international' | 'e164' | Output format | | autoDetectCountry | boolean | true | Auto-detect country from phone | | validateOnChange | boolean | true | Validate on input change | | enableFormatting | boolean | true | Format as user types | | showCountryName | boolean | false | Show country name/code in selection | | countryDisplayFormat | 'full' \| 'short' | 'full' | Country display format: 'full' = "Bangladesh", 'short' = "BD" |

Events

| Event | Payload | Description | |-------|---------|-------------| | update:modelValue | string | Emitted when phone number changes | | update:country | Country | Emitted when country changes | | change | { phoneNumber, country, isValid } | Emitted with full change data | | validate | PhoneValidationResult | Emitted on validation | | focus | FocusEvent | Emitted on focus | | blur | FocusEvent | Emitted on blur |

Composables

usePhone

Access the phone utilities directly:

import { usePhone } from 'vuetify-international-phone'

const { formatPhone, isValidPhone, parsePhone } = usePhone()

// Format phone to E.164
const e164 = formatPhone('2015550123', 'US')

// Validate phone
const result = isValidPhone('+12015550123')

// Parse phone
const info = parsePhone('+12015550123')

Country Data

Access country information:

import {
  countries,
  getCountryByIso2,
  getCountryByDialCode,
  searchCountries
} from 'vuetify-international-phone'

// Get all countries
console.log(countries)

// Find by ISO2 code
const usa = getCountryByIso2('US')

// Find by dial code
const country = getCountryByDialCode('1')

// Search countries
const results = searchCountries('United')

Styling

CSS Variables

.v-phone-input {
  --flag-width: 1.333em;
  --flag-height: 1em;
}

Custom Flag Icons

You can override the flag styles:

.v-phone-input__flag.fi-us {
  background-image: url('/flags/us.svg');
}

TypeScript Support

Full TypeScript support with included types:

import type { Country, PhoneInfo, PhoneValidationResult } from 'vuetify-international-phone'

Migration from v0.x

The component API remains mostly the same. The main changes:

1. Improved TypeScript support
2. Better performance with less re-renders
3. Additional formatting options
4. More comprehensive validation

Contributing

1. Clone the repository
2. Install dependencies: npm install
3. Start development: npm run dev
4. Run tests: npm test

License

MIT

Credits

• libphonenumber-js - Phone number validation
• flag-icons - Country flag icons
• Vuetify - Vue 3 component framework