getCountryFlagUrl

Get country flag from flagcdn.com with a simple function call

Select country

Basic usage

<template>
  <img :src="flagSrc" alt="Flag of France" />
</template>

<script lang="ts" setup >
  import { getCountryFlagUrl } from 'maz-ui'

  const flagSrc = getCountryFlagUrl('FR')
</script>

Sizing

Show full code

<template>
  <img
    v-for="{ src, size, countryCode } in sizedFlags"
    :key="src"
    :src="src"
    :alt="`${countryCode} Flag`"
  />
</template>

<script lang="ts" setup>
  import { computed } from 'vue'
  import { getCountryFlagUrl } from 'maz-ui'

  const countryCode = ref('FR')

  const sizedFlags = computed(() => {
    const sizes: Size[] = [
      '16x12',
      '20x15',
      '24x18',
      '80x60',
      'h80',
      'w160',
    ]

    return sizes.map(size => ({
      src: getCountryFlagUrl(countryCode.value, size),
      size: size,
      countryCode: countryCode.value
    }))
  })
</script>