Country display

Component

VPhoneInput country display customization allows you to change the way country are shown within the select input selection, or inside a select input list's item prepend slot. Currently, 3 built-in country displays are available: dial code (default behavior), SVG and CSS Sprite.

INFO

If you do not define countryInputComponent, the default behavior is to display the dial code of the country (e.g. +33 for France).

When providing a country display component, the dial code will appear in the append slot of each item in the country select list.

SVG (recommended)

SVG country display is the recommended option, as it provides a clear country flag icon using SVG files. It requires flag-icons package and it is provided through VPhoneCountryFlagSvg.

Installation

npm

$ npm add flag-icons

pnpm

$ pnpm add flag-icons

yarn

$ yarn add flag-icons

bun

$ bun add flag-icons

Configuration

import 'flag-icons/css/flag-icons.min.css';
import { VPhoneCountryFlagSvg } from 'v-phone-input';

const vPhoneInput = createVPhoneInput({
  // ...
  countryDisplayComponent: VPhoneCountryFlagSvg,
});

CSS sprite

Displays country using a CSS sprite. It requires world-flags-sprite package and it is provided through VPhoneCountryFlagSprite.

Installation

npm

$ npm add world-flags-sprite

pnpm

$ pnpm add world-flags-sprite

yarn

$ yarn add world-flags-sprite

bun

$ bun add world-flags-sprite

Configuration

import 'world-flags-sprite/stylesheets/flags32.css';
import { VPhoneCountryFlagSprite } from 'v-phone-input';

const vPhoneInput = createVPhoneInput({
  // ...
  countryDisplayComponent: VPhoneCountryFlagSprite,
});

Custom component

You may also want to define your own country display. For this, you can provide a custom component to countryDisplayComponent. Component must support VPhoneCountryDisplayProps properties.

Custom template

You can also pass a country-display slot the VPhoneInput component. The slot will receive the same properties as if using a custom component.

<template>
  <v-phone-input>
    <template #country-display="{ country, decorative }">
      <my-country-icon-component
        :country="country.iso2"
        :title="decorative ? undefined : country.name"
      />
    </template>
  </v-phone-input>
</template>