{"id":15265,"library":"vue-country-flag-next","title":"Vue Country Flag Component","description":"vue-country-flag-next is a dedicated Vue 3 component designed for displaying country flags, primarily identified by ISO 3166-1 alpha-2 or alpha-3 codes. The current stable version is 2.3.2, with an active release cadence addressing bug fixes and minor improvements. A key differentiator is its optimized footprint, achieved in v2.1.0 by loading flag images as separate files rather than base64 encoded strings within the CSS, reducing the package size by approximately 700kb. It natively supports TypeScript and integrates seamlessly into Vue 3 projects, offering optional properties for size, rounded borders, and shadows.","status":"active","version":"2.3.2","language":"javascript","source_language":"en","source_url":"https://github.com/P3trur0/vue-country-flag","tags":["javascript","vue","vuejs","vue3","flags","country","icon","component"],"install":[{"cmd":"npm install vue-country-flag-next","lang":"bash","label":"npm"},{"cmd":"yarn add vue-country-flag-next","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-country-flag-next","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for Vue 3 component functionality.","package":"vue","optional":false}],"imports":[{"note":"This is the default export for the component. While global registration is shown in the quickstart, local component registration is also a common pattern in modern Vue apps.","wrong":"const CountryFlag = require('vue-country-flag-next');","symbol":"CountryFlag","correct":"import CountryFlag from 'vue-country-flag-next';"},{"note":"When globally registering the component, you import the default export and then use `app.component` (or `new Vue({ components: ... })` for options API). It's not a named export for direct component registration.","wrong":"import { CountryFlag } from 'vue-country-flag-next';","symbol":"App.component","correct":"import CountryFlag from 'vue-country-flag-next';\napp.component('country-flag', CountryFlag);"}],"quickstart":{"code":"npm install vue-country-flag-next\n\n// main.js or similar entry file\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport CountryFlag from 'vue-country-flag-next';\n\nconst app = createApp(App);\n\n// Register globally for easy use across your application\napp.component('country-flag', CountryFlag);\n\napp.mount('#app');\n\n// In a Vue component's template (e.g., App.vue):\n// <template>\n//   <div>\n//     <country-flag country='it' size='big'/>\n//     <country-flag country='hr' size='normal'/>\n//     <country-flag country='fr' size='small'/>\n//     <country-flag country='rus'/>\n//     <country-flag country='de' rounded/>\n//     <country-flag country='jp' shadow/>\n//   </div>\n// </template>","lang":"javascript","description":"Demonstrates installation via npm, global registration of the `CountryFlag` component in a Vue 3 application, and basic usage within a template with various `country`, `size`, `rounded`, and `shadow` props."},"warnings":[{"fix":"Ensure your build process and deployment environment are configured to properly serve static assets (e.g., images) from the `node_modules/vue-country-flag-next` directory if you are hosting assets yourself, or ensure your bundler handles it correctly.","message":"Prior to v2.1.0, flag images were encoded as Base64 strings directly in the component's CSS. From v2.1.0 onwards, images are loaded as separate files, significantly reducing package footprint but potentially requiring server configuration to serve these assets correctly.","severity":"breaking","affected_versions":"<2.1.0"},{"fix":"Ensure you are importing the component via its main entry point (e.g., `import CountryFlag from 'vue-country-flag-next'`) rather than attempting to directly reference the `.vue` file.","message":"In v2.0.0, the `.vue` file was removed from the final npm bundle. This change primarily affects consumers who might have been directly importing or processing the `.vue` single-file component source.","severity":"breaking","affected_versions":"<2.0.0"},{"fix":"Update to version 2.0.1 or newer to resolve the AdBlock visibility issue for the Andorra flag and other potential CSS-related conflicts.","message":"Early versions (prior to v2.0.1) had an issue where the Andorra flag might not be visible due to interactions with AdBlock software, likely due to CSS class names or image URLs resembling ad patterns.","severity":"gotcha","affected_versions":"<2.0.1"},{"fix":"Ensure your project explicitly depends on Vue 3 (`\"vue\": \"^3.0.0\"`) in your `package.json` and that your application is built using Vue 3.","message":"The component requires Vue 3.x as a peer dependency. Attempting to use it with Vue 2.x will result in compatibility errors due to breaking changes in Vue's API between major versions.","severity":"gotcha","affected_versions":"all"}],"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 the component globally using `app.component('country-flag', CountryFlag)` (for `main.js`) or locally within a component's `components` option: `components: { CountryFlag }`.","cause":"The `CountryFlag` component has not been correctly registered globally or locally within the Vue application.","error":"Failed to resolve component: country-flag"},{"fix":"Import `CountryFlag` as a component and register it either globally with `app.component()` or locally within another component's `components` option, instead of trying to use `app.use()`.","cause":"This error can occur if you try to use `CountryFlag` as a Vue plugin (e.g., `app.use(CountryFlag)`), but it is a component, not a plugin with an `install` method.","error":"TypeError: Cannot read properties of undefined (reading 'install')"}],"ecosystem":"npm"}