Country
Displays a country flag with its ISO country code or custom label.
Use Country when...
- Displaying a country using a flag and short identifier (code or label).
- Adding quick visual context in tables, lists, or compact UI elements.
- Showing static, read-only country information consistently across products.
Don't use Country when...
- Allowing users to select or change a country — use a Select or Searchable Select instead.
- Displaying long or descriptive country names.
- Representing languages, regions, or nationalities.
- Acting as an interactive or behavioural element.
import { VCountry } from '@vonage/vivid-vue';
import { registerCountry } from '@vonage/vivid';
registerCountry('your-prefix');
Set the code attribute to show the country flag and country code. The flag is rendered as a Vivid icon; The displayed text is the country code (e.g. "UK", "US").
import { VCountry } from '@vonage/vivid-vue';
Use the Country component to show a country's flag and country code together. Set the code attribute (ISO 3166-1 alpha-2, e.g. "GB", "UK", "US"); the component shows the matching flag icon from vivid icon set and the country code (e.g. "UK", "US") automatically. Use the icon slot only when you need a custom flag or graphic instead of the default.
Use the label attribute when the country code alone is not clear (e.g. for less familiar codes). The component still shows the flag from code but displays the label text instead of the code. it will override the default country code text.
import { VCountry } from '@vonage/vivid-vue';
Use the icon slot to provide your own flag image or graphic instead of the default flag icon.