vue3-flag

This library uses SVGs from Flagpack and is adapted to work with Vue 3.5+ and Nuxt 4+ (SSR-ready).

Installation

# npm
npm install vue3-flag

Usage

First way: Static Imports

Fully tree-shakable — only the flags you use are included in your final bundle.

<script setup>
import { FlagVN, FlagGB_SCT } from 'vue3-flag/flags'
</script>

<template>
    <FlagVN size="lg" />
    <FlagGB_SCT size="sm" />
</template>

Naming Convention: Each flag component follows the Flag[ISO 3166 Alpha-2 code] format (e.g., FlagVN, extra cases: FlagGB_SCT, FlagGB_WLS, FlagGB_ENG).

Second way: Dynamic Component

Use the generic Flag component when the country code is determined at runtime (e.g., from an API response).

<script setup>
import { Flag } from 'vue3-flag'
</script>

<template>
    <Flag code="VN" size="lg" />
</template>

Efficiency: Only the flags you render are loaded. SVG chunks are fetched dynamically and cached for maximum performance.

You can use ISO 3166-1 Alpha-2, Alpha-3 or Numeric codes here.

Props

| Key | Value | Required | Default | Format | | :--- | :--- | :--- | :--- | :--- | | code | String | true* | - | ISO Alpha-2, Alpha-3 or Numeric | | size | String | false | 'md' | 'sm', 'md' or 'lg' | | gradient | String | false | 'none' | 'none', 'top-down', 'real-linear' or 'real-circular' | | hasShadow | Boolean | false | false | - | | hasBorder | Boolean | false | true | - | | hasBorderRadius | Boolean | false | true | - |

*If you import a specific flag component (e.g., FlagPL), the code prop is not required and is not available.

License MIT

Made with unnecessary attention to detail. Enjoy.