Countries list

ComponentComposable

VPhoneInput provides many ways to customize the countries list, in addition to country display or slots.

Default list

By default, VPhoneInput uses countries-list package, and its minimal countries.2to3.min.json file, to get a full list of country ISO-2 codes. It then resolves the name through Intl.DisplayNames and the dial code using awesome-phonenumber.getCountryCodeForRegionCode. Finally, it sorts countries by name using localeCompare.

Preferring countries

If you want to mark some countries as preferred, and make them appear before any other country, you can use preferCountries property.

app.ts

const vPhoneInput = createVPhoneInput({
  preferCountries: ['FR', 'BE'],
});

Including countries

If you want only some countries to be displayed, you can use includeCountries property.

app.ts

const vPhoneInput = createVPhoneInput({
  includeCountries: ['FR', 'BE'],
});

Excluding countries

If you want to exclude some countries from the list, you can use excludeCountries property.

app.ts

const vPhoneInput = createVPhoneInput({
  excludeCountries: ['FR', 'BE'],
});

Changing country locale

You can change the country name locale by passing a countryLocale property with the locale of your choice. The locale must be supported by the browser to produce correct names.

app.ts

const vPhoneInput = createVPhoneInput({
  countryLocale: 'fr-FR',
});

TIP

If your application supports multiple locales, you should pass countryLocale as a VPhoneInput component property (for component usage) or as a computed option (for composable usage).

Changing country name resolver

If you want to opt-out from using Intl.DisplayNames for country names localization, you can pass a countryName property with a resolver function. Here is an example with the default implementation behavior.

app.ts

const vPhoneInput = createVPhoneInput({
  countryName: (countryIso2) => new Intl.DisplayNames(['en'], { type: "region" })
    .of(countryIso2) ?? countryIso2,
});

Changing whole countries list

If you need additional country data, you can pass a custom list of countries.

VPhoneInput and usePhoneInput are generic and support any custom country objects which extends VPhoneInputCountryObject.

To use a custom countries list, just pass a countries property.

app.ts

const vPhoneInput = createVPhoneInput({
  countries: [
    {
      name: 'France',
      iso2: 'FR',
      iso3: 'FRA',
      dialCode: '33',
    },
    {
      name: 'Belgique',
      iso2: 'BE',
      iso3: 'BEL',
      dialCode: '32',
    },
  ],
});