In README of this repository the available country names are written in spanish.
It could be better to have them in English.

Using: Webpack, vue-loader, Babel

When I use TypeScript and import this lib, I got the error inside of VSCode and via serve, that the typedef file is missing. If it is easy for you, please add it. Otherwise, I will have a look later to generate one, when I have time.

Hi
flag image not loaded and show this code in HTML:
background-image: url("[object Module]");

please help me

I use laravel 8 and vue 2.5.17

I'm using the next library in a Vue 3 project with Typescript. When I import the library with import CountryFlag from 'vue-country-flag-next'; I get this error Cannot find module 'vue-country-flag-next' or its corresponding type declarations.

I created a new file vue-country-flag-next.d.ts in my project with declare module 'vue-country-flag-next'; as a workaround but It could be nice to support typing :D

My greetings to the support team!

I'm writing to you for the Republic of Belarus. As you could possibly know, dictator Lukashenko had falsified a presidential election on 9 August 2020 once again. He had usurped the power and jailed or forced to leave the country those considered to be his political opponents. The election's results had been denied by all of the EU members and all of them have supported the will of the people of this nation. It has been more than 1.5 years since the protests' outbreak, more than 30.000 people have been thrown in jails, and at least 10 people were killed (either shot or slaughtered).

The historical flag of a red horizontal stripe between two white ones, which has more than 100 years of history, has become a symbol of protest. 26 years ago, when Lukashenko came to power, he changed the flag and the emblem to those adopted from the Soviet Union.

These symbols are associated with lies and violence of the regime by the absolute majority of citizens this day.

The historical flag might be found here: https://github.com/egorikftp/Belarus-Flags-Museum/blob/release/app/src/main/ic_launcher-playstore.png

It is my duty to ask you to add the possibility of adding the alternative flag for Belarus to the library. It is a highly important issue for the thousands of Belarussians who keep using it. Thank you in advance!

Tried in quasar SSR app component. Triggers error at click/show component CountryFlag.

runtime-dom.esm-bundler.js?8886:34 Uncaught (in promise) TypeError: Cannot read property 'parentNode' of null
at parentNode (runtime-dom.esm-bundler.js?8886:34)
at componentEffect (runtime-core.esm-bundler.js?9e79:5276)
at Object.reactiveEffect [as update] (reactivity.esm-bundler.js?0a2b:42)
at updateComponent (runtime-core.esm-bundler.js?9e79:5142)
at processComponent (runtime-core.esm-bundler.js?9e79:5075)
at patch (runtime-core.esm-bundler.js?9e79:4673)
at patchKeyedChildren (runtime-core.esm-bundler.js?9e79:5414)
at patchChildren (runtime-core.esm-bundler.js?9e79:5357)
at patchElement (runtime-core.esm-bundler.js?9e79:4948)
at processElement (runtime-core.esm-bundler.js?9e79:4757)

Hello!
Thank you for sharing package
but after installation by

npm i vue-country-flag
+ [email protected]
added 1 package from 1 contributor and audited 939528 packages in 26.977s

I am getting error:

This relative module was not found:
* ./css/flags/flags.min.css in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-country-flag/src/CountryFlag.vue?vue&type=script&lang=js&

And I have double-checked there is no such folder as css in src in node_modules, I can see it here on github.. but probably problem is in package.json:

"files": [
    "dist/*",
    "src/**/*.vue"
  ],

as you can see css is not included

I have used:
npm -v
6.13.4
for installation

I have tried yarn 1.15.2 .. but same result

Thanks :)

Right now the sprites seem to have some sort of hidden margin, possibly described in issue #14

I would like the flag sprite to have no margin at all, and to be exactly as big as the sprite itself, so that I can avoid issues like this:

Where there is a huge hidden margin (padding?) that won't allow the flag to align with the flexbox's aligh-items: flex-end prop:

The height of the <span> that the package renders is fine I think

But the browser tools show a different height/width without margin or padding:

For reference, here's the element in the console:

<country-flag :country="item.value" size="small"/>

I have tried item.value in Alpha3 and Alpha 2 with the same issues
e.g.
item.value = 'AU'
item.value = 'AUS'

However it works without being binded to item

<country-flag country="AU" size="small"/>

I'm getting the following error in Vue 3:

Uncaught (in promise) Error: Dynamic require of "node_modules/vue-country-flag-next/dist/flags.png" is not supported

I tried importing directly in the Component and globally.

import CountryFlag from "vue-country-flag-next"

  components: {
    CountryFlag,
  }

      <template v-slot:[`item.country`]="{ item, highlightMatches }">
        <td v-html="highlightMatches(item.country)"></td>
        <country-flag :country="item.country" size="small" />
      </template>

Might be related to the fix for #26 Now the rounded property seems to have no effect.

Hi thanks for this handy package.
is it possible add label prop so that user can customize the display label? current it is display country code, if we need display something else there is no way do it. thanks for considering.

Hi,
I used the latest version (2.3.2) of vue-country-flag, unfortunately, does not display any flags in the android browser but no problem on the desktop.
you can see the problem top of this page:
https://flashdump.ir/en

please help me

Hi,

there is something wrong with displaying flags on IE/Edge. They don't have inline style for transform scale, so provided size doesn't apply. On Chrome, Firefox & Opera problem doesn't exist.

Only workaround I found to set inline style manually.

Hello,

I've added the dependency vue-country-flag-next using yarn in my project, and followed the doc to register the component, but I get the following error

 ERROR  Failed to compile with 1 error                                                                                                                                                                             11:38:05
This dependency was not found:

* vue-country-flag in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/LocaleSwitcher.vue?vue&type=script&lang=js

To install it, you can run: npm install --save vue-country-flag

Here is how I registered it

<template>
 <country-flag :country="locale" size="big"/></option>
</template>

<script>
import CountryFlag from 'vue-country-flag'

export default {
  components: {
    CountryFlag
  }
}
</script>

this version is installed vue-country-flag-next
for example

rounded style does not work

Hi, tried with Vue 3 but seems not working?

fix for Vue 3

change this
import CountryFlag from 'vue-country-flag-icon'
to this
import CountryFlag from 'vue-country-flag-next'

Hi! There is white empty space instead of nothing if prop country is a non-existing country code. It's weird.
There should be some kind of validation to check the existence of such a country code to render Flag component.

As reported in #38, vue-country-flag does not work with Vue 3.

Flags that have white backgrounds such as Japan, Monaco, Madagascar

(and many others) do not look like flags when displayed on white backgrounds. We wanted to add some slight elevation to the flags by adding a box shadow. However, upon looking closely at flags.png, not all the flags are of equal width making the box-shadow look inconsistent. And this is not even taking into account the 3px white space on the left and right sides (why do you need that?) which I had to account for as well.

My suggestion is 3 things:

1. Can we make all the flags the same width in flags.png
2. Can we remove the white space in the left and right sides
3. Make elevation (box shadow) a prop??

At the very least #1 would be required. #2 can be handled by css on my end if you don't agree.

Stack

• nuxt v2.15.6
• vue-country-flag v2.1.1

reproduction link
Just a simple yarn create nuxt-app with vue-country-flag dependency.

• pull https://github.com/existe-deja/test-vue-country-flag
• yarn install
• yarn dev

Problem
When I use the country-flag component I get a 404 for http://localhost:3000/vue-country-flag/dist/flags.png on initial render (SSR).
Is it possible to get vue-country-flag working in SSR mode?

Workaround
Wrap it around special component who disable SSR.

https://twitter.com/wbwflag

https://whitebluewhite.info/en

This is the new symbol of Russia that spontaneously emerged in the Russian emigrant community. It is meant to either replace the current flag abroad or to be used as a symbol of the peace movement.

SVG: https://static.tildacdn.info/tild6130-3062-4831-a531-346463653966/Flag_of_Russia_new.svg

Could you add an extra flag for the Arab League?

adblock (from https://getadblock.com/) blocks the andorra flag cause the class is f-ad. could you please change the andorra flag class?

Hi,
I can't get the sizes to work in Nuxt. I think I might be missing something?

@plugins/vue-flags.js

import Vue from 'vue';
import CountryFlag from 'vue-country-flag';

Vue.use(CountryFlag);

in my nuxt.config

  plugins: [
    { src: '@/plugins/vue-flags.js' }
]

and in a component I want to use it in,

 <CountryFlag country="fr" size="small" />

Yet the size attribute doesn't do anything, it's always normal size which is too big for my use case.

I might be missing a step or it just doesn't work with Nuxt?

Let me be clear that I think this is 100% not your fault, but on the off chance it is a bug on this side, or something that can be adjusted, I thought I'd file it. I know it isn't your job to support an online editor, but again I figured it couldn't hurt to mention it. :)

So long story short, the component doesn't work in Code Sandbox. You can see my code here:

https://codesandbox.io/s/vue-template-tn6p7?fontsize=14

I see nothing in the logs, nor the console. However, the same code, exported and ran locally on my machine, works fine.

Again, feel free to close, but if it's a small thing that could be addressed, I thought I'd share. Thank you for reading!

It could be cool to reduce the footprint of the component.
Possible approaches:

• avoid to bundle minified CSS in each built .js file
• find an alternative to Base64 sprite bundled in CSS (as pointed in #21)

Hello.

Before USSR destruction people of USSR voted to save USSR, but leaders of UA Kravchuk, BLR Shuskevich and Russia Eltsin dissolved USSR in 1991.

Current Russian flag has controversial associations for many people, specially since WW2.
It is highly important for dozens of Russians to use USSR flag.

https://en.wikipedia.org/wiki/Flag_of_the_Soviet_Union

Thank you for understanding.

Remove inline styles (styleInject) to support CSP (Content Security Policy).

Error:

There are no typings in this package. They aren't listed in package.json and the unused d.ts files are only declaring its existence without any further description of what the component properties are, or that there is a component in the first place. Take a look at the excellent typings in bootstrap-vue.

Tried both alpha 2 and alpha 3 ISSO 3166-1 it gives error. Secondly the flags are bit blurry for Firefox. Please let me know what are the supporting changes to be importantly for chrome android app. Thanks in advance.

Any plans to include ISO 3166 alpha-3 support? Is this something that you'd accept a PR for?

I installed latest version (2.3.2).
My vue js version is 3.2.26.

Following the docs, after importing & registering in specific component, I use e.g. the following:
<country-flag country='fr' size='small'/>
The error I get is

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c')
    at Proxy.__vue_render__ (country-flag.esm.js?eea2:231:1) etc..

I get the error from line 231 in country-flag.esm.js
Any ideas?

for vue-country-flag-next, seems there are still some imports relying on vue-country-flag

Error: ENOENT: no such file or diru/Documents/apps//node_modules/vue-country-flag.esm.js'
at Object.openSync (node:fs:59
at Object.readFileSync (node:f

why I have this ?

Any element with the class of .f is being styled by the styles in this component.

In our application, our customers are allowed to create or provide supplemental HTML, and some customers use 'f' as a class. This is causing many of their UIR elements to appear broken.

As you can see it here in my image:

I use the medium flag. The problem is, that the space around is to high. It comes from the width/height 64px whily you scale it down to half of it. So it will show 32px but it will keep the original height/width. Just scaled down.

When I override the 64px with e.g. 32px (due to medium that I want) the position of the css-sprite is not correct anymore. See:

So I can try to fix the CSS for my needs (could be tricky) or it should be an option to shrink it really down to the exact size. Or you should have different css-sprites for small, medium, large (?).

"vue-country-flag": "^2.1.0"
"nuxt": "^2.15.4"

I get an error: Invalid or unexpected token. It was working with ^2.0.4. The error occurs because of the SSR.

Flag for Kosovo is currently missing

i cannot get it to work using docs with vue 3

Just thought you should know that Base64 encoding images should be avoided. See: https://stackoverflow.com/a/11402374/2719773

The production JS files seem to have the flag sprite embedded as a Base64 string. I think that this is not necessary. Modern server and HTTP protocols help minimize the impact of making multiple requests for resources. I think that it will have a better impact on overall build sizes with minimal performance impact by requesting the image as a file instead of parsing the string.

It looks like in the recent update (thank you so much!) Andorra was missing its 2-digit country code.

This PR aims to restore that: #33