Phone Number VueCountry-aware phone input for Vue 3

Headless composable that handles country selection, digit normalization, calling codes, mask patterns, and phone validation — no masking library needed.

Get Started

API Reference

Country-Aware State

Manages the selected country with ISO codes, calling codes, and phone-length rules for 200+ countries out of the box.

Digit Normalization

Strips non-numeric characters and auto-truncates input to the selected country's max phone length as the user types.

Built-in Validation

Validates phone length against the selected country's allowed lengths. Returns `isValid` as a reactive boolean — no extra library needed.

Mask Pattern Output

Returns a mask string like `XXXXX XXXXX` for the selected country. Use it to show a placeholder or guide input — zero masking dependency.

Calling Code

Returns the calling code for the selected country (e.g. `+91` for India) as a reactive computed ref.

Headless & UI-Agnostic

The composable returns raw state and handlers. Bring your own select, input, and styling — works with any Vue UI.

Built-in Country Data

Ships with bundled country and dial-code metadata. Override with your own data by passing a custom ref — no server calls required.

Fully Typed

Complete TypeScript types for all return values, options, and custom data shapes. Works out of the box with Volar and vue-tsc.

INTERACTIVE DEMO

Try the usePhoneNumber logic live

Select a country and type numbers to see normalization, validation, and mask properties in real-time.

State Inspector

selectedCountryIndia (IN)

callingCode+91

localPhone""

mask+91 ##### #####

formattedPhone+91 ...

isValidfalse