Open source @drobinetm/countries-flags
GitHub

Vue demo

Vue demo

Demo page for the Vue component.

Live demo

Interactive preview

Case 01

List all countries

Default

Baseline scenario without max and without filter, shared across the three demos.

Case 02

List four countries with max=4

Max

Validates the max prop using the same shared reference value across all demos.

Case 03

Filter by ISO list

Filter

Uses the same shared filter array in the three demos.

['es', 'br', 'ar', 'uy', 'us', 'gb']

Case 04

Filter plus max

Combined

Validates the combined use of filter and max with the same values across all frameworks.

Manual testing notes

  • Use Enter or Space on the trigger to open the list.
  • Use Escape to close the list.
  • Click outside the list to close it.
  • Resize below 768px and confirm the layout stacks without horizontal overflow.

Captured change events

No events captured yet.

Local run

Run the workspace demo

Run the Vue demo locally from the workspace. 

pnpm install
pnpm dev:vue
Copied

Reference snippet

Example snippet

This is the example used on the demo page. 

<CountriesFlags
  v-model="selectedCode"
  :filter="['es', 'br', 'ar', 'uy', 'us', 'gb']"
  :max="4"
  @change="handleCountryChange"
/>
Copied