{"id":15266,"library":"vue-country-flag","title":"Vue Country Flag Component","description":"vue-country-flag is a lightweight Vue 2 component designed for displaying country flags, primarily utilizing ISO 3166-1 alpha-2 or alpha-3 country codes. The package is currently stable at version 2.3.2, with its release cadence focusing on bug fixes, adding new flags, and minor feature enhancements such as `rounded` borders and `shadow` effects. A key differentiator and performance improvement was introduced in v2.1.0, which shifted from embedding flag images as base64 strings in CSS to loading them as separate files, significantly reducing the bundle size by approximately 700KB. Although a patch in v2.0.4 noted it was 'usable on Vue3', its `peerDependencies` explicitly target Vue 2 (`^2.6.12`), indicating its core compatibility. It supports customizable sizes ('small', 'normal', 'big') and is marked as TypeScript supported.","status":"active","version":"2.3.2","language":"javascript","source_language":"en","source_url":"https://github.com/P3trur0/vue-country-flag","tags":["javascript","vue","vuejs","vue2","flags","country","icon","component"],"install":[{"cmd":"npm install vue-country-flag","lang":"bash","label":"npm"},{"cmd":"yarn add vue-country-flag","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-country-flag","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue 2 applications.","package":"vue","optional":false}],"imports":[{"note":"The component is distributed as an ES Module. Use `import` for modern Vue CLI or Vite projects.","wrong":"const CountryFlag = require('vue-country-flag')","symbol":"CountryFlag","correct":"import CountryFlag from 'vue-country-flag'"},{"note":"Common pattern for making the component available globally across a Vue 2 application.","symbol":"Vue.component for global registration","correct":"import Vue from 'vue'\nimport CountryFlag from 'vue-country-flag'\nVue.component('country-flag', CountryFlag)"},{"note":"Recommended approach for components used in specific Vue Single File Components (SFCs).","symbol":"Local component registration","correct":"import CountryFlag from 'vue-country-flag';\nexport default {\n components: { CountryFlag }\n}"}],"quickstart":{"code":"import Vue from 'vue';\nimport CountryFlag from 'vue-country-flag';\n\n// Register the component globally\nVue.component('country-flag', CountryFlag);\n\n// Example Vue app setup\nnew Vue({\n el: '#app',\n template: `\n
\n

Country Flags

\n

Displaying various country flags with different sizes and styles.

\n \n \n \n \n \n
\n `\n});","lang":"javascript","description":"This quickstart demonstrates how to globally register the `CountryFlag` component and use it within a basic Vue 2 application, showcasing different `country`, `size`, `rounded`, and `shadow` prop configurations."},"warnings":[{"fix":"Review your CSS and update selectors to match the new class names. Consult the component's generated HTML for the current class structure.","message":"The internal CSS base class for flags was renamed in v2.0.1. Any custom styles or overrides targeting the old class names will cease to work.","severity":"breaking","affected_versions":">=2.0.1"},{"fix":"Ensure your build process and deployment environment are configured to correctly serve static assets. No direct code change is typically needed for standard setups, but be aware of potential issues in highly customized environments.","message":"In v2.1.0, the component changed its method of loading flag images from base64 encoded strings in CSS to separate image files. While this significantly reduced bundle size (~700KB), it might require adjustments to build configurations or asset serving in specific environments (e.g., if you were previously relying on completely self-contained CSS).","severity":"gotcha","affected_versions":">=2.1.0"},{"fix":"For production Vue 3 applications, consider using a flag component specifically designed and maintained for Vue 3. Use this package with caution in Vue 3, understanding its primary target is Vue 2.","message":"Although v2.0.4 mentioned making the component 'usable on Vue3', the package's `peerDependencies` explicitly require Vue 2 (`^2.6.12`). While it might function in some Vue 3 setups, it is not officially supported for Vue 3 and may lead to unexpected behavior or future incompatibilities.","severity":"gotcha","affected_versions":">=2.0.4"},{"fix":"Always use valid ISO 3166-1 alpha-2 (e.g., 'us', 'fr') or alpha-3 (e.g., 'usa', 'fra') codes. Refer to the 'Available Flags' section in the documentation for a full list of supported codes.","message":"The component relies on ISO 3166-1 alpha-2 or alpha-3 codes for country identification. Providing an invalid or non-existent code for the `country` prop will result in a broken image or no flag being displayed.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure you have either registered it globally via `Vue.component('country-flag', CountryFlag)` in your `main.js` or locally within the `components` option of your Vue component: `components: { CountryFlag }`.","cause":"The `CountryFlag` component has not been correctly registered with Vue.","error":"Failed to resolve component: country-flag"},{"fix":"Run `npm install vue-country-flag` or `yarn add vue-country-flag`. Verify your import statement: `import CountryFlag from 'vue-country-flag'`.","cause":"The `vue-country-flag` package is not installed or the import path is incorrect.","error":"Error: Cannot find module 'vue-country-flag'"},{"fix":"Ensure you pass a valid ISO 3166-1 alpha-2 or alpha-3 string to the `country` prop, e.g., ``.","cause":"The `country` prop is mandatory and was either not provided or was provided with an undefined value.","error":"[Vue warn]: Invalid prop: type check failed for prop \"country\". Expected String, got Undefined."}],"ecosystem":"npm"}