Registry / web-framework / vue-flag-icon

vue-flag-icon

library2.1.0jsnpmunverified

vue-flag-icon is a Vue 2 component designed to display country flags within Vue applications, leveraging the popular `flag-icon-css` library. It provides a simple `<flag>` component that accepts an `iso` prop for the two-letter ISO country code, automatically rendering the corresponding flag. Additional props like `squared` (to toggle between rectangular and square aspect ratios, `true` by default) and `title` (for accessibility and hover text) are supported. The package is currently at version 2.1.0, primarily targeting Vue 2. Due to its dependency on Vue 2's API (`Vue.use()` for global registration), it is generally considered to be in maintenance mode, with no active development for Vue 3 compatibility. It distinguishes itself by offering a straightforward wrapper for `flag-icon-css`, simplifying flag integration for Vue 2 projects without requiring direct CSS manipulation for each flag.

web-framework

npm install vue-flag-icon

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-FLAG-ICON

vue-flag-icon

web-frameworkjavascriptv2.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

FlagIcon

✓ import FlagIcon from 'vue-flag-icon'; Vue.use(FlagIcon);

✗ const FlagIcon = require('vue-flag-icon'); Vue.use(FlagIcon); // Works but less idiomatic for modern Vue setup import { FlagIcon } from 'vue-flag-icon'; // Incorrect named import for the plugin

This imports the plugin object, which must then be registered globally using `Vue.use()` to make the `<flag>` component available throughout your Vue 2 application.

<flag>

✓ <template> <flag iso="us" /> </template>

✗ import Flag from 'vue-flag-icon/src/Flag.vue'; // Direct component import not intended for plugin usage app.component('flag', FlagIcon); // Incorrect usage with Vue 3 API

The `<flag>` component becomes globally available for use in Vue 2 templates after installing the `FlagIcon` plugin via `Vue.use()`. It requires the `iso` prop.

This quickstart demonstrates how to install and globally register `vue-flag-icon` in a Vue 2 application, then use the `<flag>` component with various props like `iso`, `squared`, and `title`.

import Vue from 'vue'; import FlagIcon from 'vue-flag-icon'; import App from './App.vue'; // IMPORTANT: Ensure flag-icon-css is imported in your main CSS/SCSS file or component // e.g., in main.js or a global style file: // import 'flag-icon-css/css/flag-icon.min.css'; // Globally register the FlagIcon component plugin Vue.use(FlagIcon); new Vue({ el: '#app', render: h => h(App) }); /* In App.vue */ /* <template> <div id="app" style="font-size: 80px;"> <p>Default flags:</p> <flag iso="it" /> <flag iso="gb" /> <flag iso="us" /> <p>Squared flag:</p> <flag iso="de" :squared="true" /> <p>Dynamic nationality:</p> <flag :iso="person.nationality" /> <p>Flag with custom title:</p> <flag iso="fr" title="France" /> </div> </template> <script> export default { name: 'App', data() { return { person: { name: "Vincenzo", nationality: "jp" } }; } }; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; text-align: center; color: #2c3e50; margin-top: 60px; } </style> */

Debug

Known issues

breakingThis package is specifically built for Vue 2 and uses the `Vue.use()` API for global component registration. It is not compatible with Vue 3 applications due to significant API changes.

fix

For Vue 3 projects, consider using alternative flag icon libraries designed for Vue 3 or directly integrate `flag-icon-css` and wrap it in a custom Vue 3 component.

affects: >=1.0.0

gotchaThe underlying `flag-icon-css` library must be correctly imported and processed by your build system (e.g., Webpack, Vue CLI) for the flags to display. `vue-flag-icon` is a component wrapper, not a self-contained CSS bundle.

fix

Ensure you add `import 'flag-icon-css/css/flag-icon.min.css';` to your main JavaScript file (e.g., `main.js`) or a global stylesheet that is part of your build pipeline.

affects: >=1.0.0

gotchaFlag icons are rendered as SVGs and their size is determined by the `font-size` of their parent element. If flags appear too small or too large, adjust the `font-size` accordingly.

fix

Wrap the `<flag>` component in a `div` or other element and apply `font-size` style, e.g., `<div style="font-size: 180px;"><flag iso="it" /></div>`.

affects: >=1.0.0

deprecatedThe `Vue.use()` pattern for global plugin installation, while standard in Vue 2, is replaced by `app.use()` in Vue 3. While not a breaking change for Vue 2, it's a pattern that has been superseded in the current major Vue version.

fix

Continue using `Vue.use(FlagIcon)` for Vue 2 projects. If migrating to Vue 3, this package is not compatible and an alternative approach is needed.

affects: >=1.0.0

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <flag> - did you register the component correctly?

The `FlagIcon` plugin was not properly registered with Vue using `Vue.use()`.

fix

Ensure you have `import FlagIcon from 'vue-flag-icon';` and `Vue.use(FlagIcon);` in your main JavaScript entry file (e.g., `main.js`).

Flags are not showing up or appear as empty boxes/placeholders.

The `flag-icon-css` stylesheet is not being loaded or is missing from your project's build.

fix

Verify that `flag-icon-css` is installed (`npm install flag-icon-css`) and that its CSS is imported, for example, by adding `import 'flag-icon-css/css/flag-icon.min.css';` to your `main.js` or a global style file.

Module not found: Error: Can't resolve 'vue-flag-icon'

The `vue-flag-icon` package is either not installed or there's a typo in the import path.

fix

Run `npm install vue-flag-icon --save` (or `yarn add vue-flag-icon`) to install the package, and double-check the import statement for any typos.

Upgrade

Version history

2.1.0latest on npm

Audit

Dependencies

vuerequiredPeer dependency required for the component to run in a Vue 2 environment.

flag-icon-cssrequiredRuntime dependency providing the actual flag icon SVG and CSS styles. Must be included in the project's build process.

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/vikkio88/vue-flag-icon ↗

packagehttps://www.npmjs.com/package/vue-flag-icon ↗