Vue

First Install

Example Component

Create a FlagList.vue component to display all flags or filter by country:

<template>
  <div>
    <h1>Flags</h1>
    <input v-model="country" placeholder="Enter country code" />
    <div v-for="flag in flagsToDisplay" :key="flag">
      <h2>{{ flag }}</h2>
      <div v-html="getFlagSvgContent(flag)"></div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import { getAllFlags, getFlagsByCountry, getFlagSvg } from 'open-flags';

export default {
  setup() {
    const country = ref('');

    const flagsToDisplay = computed(() =>
      country.value ? getFlagsByCountry(country.value) : getAllFlags()
    );

    const getFlagSvgContent = (flag) => {
      const [country, region] = flag.split('/');
      return getFlagSvg(country, region);
    };

    return {
      country,
      flagsToDisplay,
      getFlagSvgContent,
    };
  },
};
</script>